Bootstrap 手册 04 - 栅格系统篇

Bootstrap 将主体宽度平分为 12 份，调整内外边距，结合媒体查询，形成了响应式栅格系统；

• .container>.row>.col-(设备宽度代号)-(列数)
• .col-*-* 以 padding 撑开，第一以及最后一个元素设置负的 margin，抵消 padding 影响；
• .col-*-*：Bootstrap 框架的网格系统中有四种基本类型（超小屏 xs - 768px - 小屏 sm - 992px - 中屏 md - 1220px - 大屏 lg）
  Bootstrap 栅格系统

Bootstrap 栅格系统工作原理

1. 最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。
2. 1 是 .container；对不同分辨率，其宽度也不同：auto、750px、970px 和 1170px；
3. 2 是将 .row 平分了 12 等份，即列；每个列都有一个 padding-left: 15px;（粉色部分）和一个 padding-right: 15px;（紫色部分）；这样也导致了第一个列的 padding-left 和最后一列的 padding-right 占据了总宽度的 30px，从而致使页面不美观，当然，如若需要留有一定的间距，这个做法是不错的；
4. 3 就是 .row，其定义了 margin-left 和 margin-right 值为 -15px，用来抵消第一个列的左内距和最后一列的右内距；
5. 将行与列给合在一起就能看到 4 的效果；也即期望看到的效果，第一列和最后一列与 .container 之间没有间距；

1. 列偏移

有时，我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来；此时可用列偏移 offset 功能来实现；

• .col-(设备宽度代号)-offset-(偏移列数)
• 在要偏移的地方插入类名，具有这个类名的列就会向右偏移；

2. 列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离；

• col-md-push-(浮动列数) / col-md-pull-(浮动列数)

3. 列嵌套

Bootstrap 框架的栅格系统还支持列的嵌套；可以在一个 .col-*-* 中添加一个或者多个 .row>.col-*-*；