1、栅格系统

• Bootstrap默认的是栅格系统
• 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，用来盛放你的内容
• 栅格系统是12列 ，形成一个940px宽的容器
  使用 .col-md-offset-*类可以将列向右侧偏移
• 所有列必须放在 .row 内
• 示例

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
 </div>
<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>

• 效果图

  
  

• 详解
  使用单一的一组 .col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列

2、布局容器

• Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器

• 我们提供了两个作此用处的类，由于padding 等属性的原因，这两种容器类不能互相嵌套

• .container类用于固定宽度并支持响应式布局的容器

<div class="container">
...
</div>

• .container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
...
</div>

3、嵌套实例

• 示例

<div class="row">
    <div class="col-xs-12" style="background-color: red">  第一级别     
    <div class="row">
       <div class="col-xs-6" style="background-color: black">第二级别</div>            
       <div class="col-xs-3" style="background-color: blue">第二级别</div> 
     </div>
    </div>
</div>

• 效果图

  
  
• Note
  每个嵌套的级别的网格数加起来都应该是 12 栏

参考文章推荐：
栅格系统