BOOSTRAP 3.0 网格(GRID)工作原理

BOOTSTRAP CSS 网格是实现响应式页面设计的利器，但至于它的工作原理，大多数时候对开发人员应该是一个黑盒。很少有人想知道它背后是如何工作的。直到你自已设计的页面无法满足一个复杂的需求，或者设计出来的页面显示怎么也达不到你的预期。你真的会像丈二和尚摸不着头脑。直到我看到了一篇国外开发人员写的文章，它提示了一些BOOTSTRAP 3.0框架中GRID的一些工作原理，这边简单做一个归纳总结，供大家参考。

容器 ( container)

• 容器的左内边距是15px，如下图给粉红部分显示

• 容器的宽度动态地取决于屏幕宽度

  
  
  

  容器

行(row)

• 列column应该包含在行row里面 ，最多可添加到12的列。它还充当包装器，因为所有列都向左浮动,如果浮动异常，行与行之间也不会有重叠。

• 行每边都有15px的负边距，如下图中蓝色所示。它正好抵消了外部容器的15px的左内边距。理解这点至关重要，有助于理解后续列 column的排列方式。以及自已设计的页面布局出现异常的时候。它使得行内的列可以贴着屏幕边距为起点，计算左内边距

• 不要在容器外使用行，那将不起作用

行

列(column)

• 列现在有15px的内边距，以黄色显示。这样一来就可以做到2点：

  • 两侧列沿着容器对齐（由于行的-15px)
  • 列与列的内容之间永远保持着30px的间隙

• 不要在行外使用列，那将不起作用

列

列的内容

有了上述行和列的内边距互相抵消，这样每一列的内容，无管是最2边的列，还是中间的列，对于整个屏幕来说，都是平等对待的，同时还能控制在同一行当中，即15px + ??px+ 15px的独立单元，这便是container > row > column 的内边距设置的巧妙之处。

列的内容

嵌套

可以在列中创建新的网格系统，记得只能在列中使用行，不能使用容器：
这样外层列对于内层行来说，与最外层的容器与行来说的关系是一样的。
也就是说此时，列的作用与容器的作用相同，形成一个递归关系。

嵌套1

嵌套2

偏移 （offset)

偏移比较好理解，它只是将列的左外边距增加相应的若干个单位长度。只唯一需要注意的是，针对最左侧列进行偏移时，偏移的起始位置，如下图所示，是从行的-15px外开始的。其实这也好理解，因为外部的行的起始位置是-15px,毕竟内边距也属于行的一部分。而中间的列进行偏移时，效果是将前一列与当前列一分为二。

偏移

推和拉（push and pull)

为什么使用推/拉？根据屏幕尺寸的变大变小，翻转当前布局。
特别适用于将列重新排列，当屏幕从移动设计布局变到桌面设计，因为它允许你在屏幕大小变动时，打破HTML默认的：自顶向下，从左至右的布局方式。

特别需要注意的是，pull和push实际上移动了列的位置，而不是改变列的左右边距，如下图所示，这样一来，如果push/pull一个列，而不是push/pull其相邻列的话，会出列与列内容重叠在一起的情况。

推和拉-1

因此，每当你pull/push一列的时候，相应的邻近的列也要做一个互补的push/pull的操作。

推和拉-2

明白了网格系统的以上工作原理，我项目当中页面布局的异
常都得到了合理的解释。如果觉得还是很难理解，那就切记要按照
container ->row ->column->row->column这种方式去组织界面的网格元素。