1-12. Bootstrap 网格系统详解

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

优先设计更小的宽度。 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。（移动设备优先） 

<div class="container">

   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>  
      <div class="col-*-*"></div>  
   </div>

   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>  
      <div class="col-*-*"></div>  
   </div>

</div>


<div class="container">

   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>  
   </div>

</div>

 

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。

例如 col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 col-md-offset- 类。（默认向右便宜）

这些类会把一个列的左外边距（margin）增加 * 列，其中偏移范围是从 1 到 11

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。

被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* （向右推）和 .col-md-pull-* （向左拉）类的内置网格列的顺序，其中 * 范围是从 1 到 11。