BOOTSTRAPCSS网格是响应式页面设计的强大工具，但至于它的工作原理，大多数时候对开发人员来说应该是一个黑盒子。很少有人想知道它是如何在幕后运作的。直到您设计的页面无法满足某个复杂的需求，或者设计的页面显示效果无法满足您的期望。你真的会像张二和尚一样百思不得其解。直到看到一篇国外开发者写的文章，提出了BOOTSTRAP3.0框架下GRID的一些工作原理。这里简单总结一下，供大家参考。容器（container）容器的左内边距为15px。下图粉色部分表示容器的宽度动态依赖于屏幕宽度。行（row）列要包含在行中，最多可以加12列。它还作为一个包装器，因为所有列都向左浮动，如果浮动不正常，行与行之间不会重叠。该行的每一侧都有15px的负边距，如下图中的蓝色所示。它恰好抵消了外部容器的15px左填充。理解这一点对于理解后续列的排列方式至关重要。而当你设计的页面布局出现异常时。它使得列中的行可以紧贴屏幕边距为起点，计算左边距不要使用容器外的行，那将不起作用列（column）现在有15pxpadding，显示为黄色。这样可以达到2点：两边的列沿着容器对齐（由于行的-15px），列和列的内容之间总是有30px的间隙。不要使用行外的列，这样是行不通的。上述行和列的内容相互抵消，使得每一列的内容，无论是两侧的列还是中间的列，对于整个屏幕来说都是同等对待的，并且在同时控件在同一行，即15px+??px+15px的独立单元。这就是container>row>column设置内边距的巧妙之处。嵌套可以在列中创建一个新的网格系统，记住你只能在列中使用行，不能使用容器：所以外列对内行和最外层容器和行的关系是一样的。也就是说，此时列的作用与容器的作用相同，形成递归关系。偏移量（offset）偏移量比较容易理解，它只是将列的左边距增加相应的单位长度数。唯一需要注意的是，在对最左边的列进行偏移时，偏移的起始位置如下图所示，是从行外的-15px开始。其实这个很好理解，因为外边线的起始位置是-15px，毕竟内边距也是线的一部分。当中间列偏移时，效果是将上一列和当前列一分为二。推拉（pushandpull）为什么要用push/pull？根据屏幕大小翻转当前布局。当屏幕从移动设计布局更改为桌面设计时，它对于重新排列列特别有用，因为它允许您打破HTML默认设置：当屏幕尺寸发生变化时，从上到下、从左到右的布局。特别地，pull和push实际上移动的是列的位置，而不是改变列的左右边距，如下图，这样ifpush/pull一列，而不是push/pull其相邻的If是一个栏目，会出现栏目和栏目内容重叠的情况。因此，每当你拉/推一列时，对应的相邻列也需要做一个互补的推/拉操作。了解了以上网格系统的工作原理后，我的项目中出现的页面布局异常就得到了合理的解释。如果还是觉得难以理解，记得按照容器->行->列->行->列的方式组织界面的网格元素。
