zoukankan      html  css  js  c++  java
  • Bootstrap3 栅格系统-实例:响应列重置(Responsive column resets)

    四层的网格你肯定会遇到问题,可用在特定的断点,你的列不清楚作为一个比另一个高完全正确。为了解决这个问题,结合使用.clearfix和响应的实用工具类。
    这里写图片描述

    <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    
      <!-- Add the extra clearfix for only the required viewport -->
      <div class="clearfix visible-xs-block"></div>
    
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
    

    除了列清算在响应断点,你可能需要重置补偿,推或拉。看到这个动作的网格的例子。

    <div class="row">
      <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
      <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>
    
    <div class="row">
      <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
      <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
    </div>
    

    推荐一个不错的深入理解文章
    http://www.cnblogs.com/huige728/p/3710303.html


    —–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
    —–乐于分享,共同进步!
    —–更多文章请看:http://blog.csdn.net/duruiqi_fx


  • 相关阅读:
    MySQL数据库之数据类型
    MySQL数据库之数据操作
    MySQL数据库之表的操作
    十、原子操作
    九、std::async异步线程
    八、条件变量
    cisco笔试记录
    七、单例设计模式
    基于HTTP的功能追加协议
    使用栈来计算后缀表达式
  • 原文地址:https://www.cnblogs.com/hainange/p/6153768.html
Copyright © 2011-2022 走看看