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 的内边距设置的巧妙之处。

嵌套

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

偏移 （offset)

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

推和拉（push and pull)

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

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

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

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