Bootstrap - 栅格系统布局

结构必须是：
container->row->col
容器->行->列。
必须是列为基本元素。

代码：

 <div class="container">
    <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>

行（row）必须包含在.container（固定宽度）或者.container-fluid（100%宽度）中。
使用.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的，在桌面（>970px）屏幕设备上变为水平排列。

注意：col-md-* 是（手机，平板 与 电脑屏幕的分界）

示例：

<div class="container" id="summary-container">
    <div class="row">
      <div class="col-md-4">
        <h6>第一个栏</h6>
        <p>the first col</p>
      </div>
      <div class="col-md-4">
        <h6>第二个栏</h6>
        <p>the second col</p>
      </div>
      <div class="col-md-4">
        <h6>第三个栏</h6>
        <p>the thrid col</p>
      </div>
    </div>
  </div>

样式：

#summary-container {
  margin-top: 60px;
}
#summary-container .col-md-4 {
  text-align: center;
  border: 1px solid #2a6496;
}

效果：

图片.png