简单使用栅格:

<body>
 <div class="container">
    <!-- 栅格系统:行和列的布局,网格状布局 -->
    <!-- 行:row -->
    <!-- container 默认有15px的左右内间距    
         row 填充父容器的15PX左右的间距
         margin-left margin-right 设置为 -15px -->
    <div class="row">
      <!-- 列:col-*-*   星号代表不确定(传参) -->
      <div class="col-lg-4"></div>
      <div class="col-lg-4"></div>
      <div class="col-lg-4"></div>
    </div>
    <!-- <div class="myRow"></div> -->
  </div>
</body>

响应式使用栅格:

<body>
    <!-- 
      大屏设备 让div平均分成6等份
      中屏设备 让div平均分成4等份 
      小屏设备 让div平均分成3等份
      超小屏设 让div平均分成2等份
      -->
      <div class="container">
        <div class="row">
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 "></div>
        </div>
      </div>
  </body>

隐藏栅格:

  <body>
    <!--
      大屏设备 显示
      中屏设备 隐藏 
      小屏设备 显示
      超小屏设 隐藏 
      
      visible-lg 大屏生效其他隐藏
      visible-md 中屏生效其他隐藏
      visible-sm 小屏生效其他隐藏
      visible-xs 超小屏生效其他隐藏
      
      hidden-lg 大屏生效其他隐藏
      hidden-md 中屏生效其他隐藏
      hidden-sm 小屏生效其他隐藏
      hidden-xs 超小屏生效其他隐藏
      
      3.2版本以后建议使用hidden
      -->
    <div class="box visible-lg visible-sm">
      吃葡萄不吐葡萄皮
    </div>
  </body>

 


本文转载:CSDN博客