理解bootstrap栅格

bootstrap栅格系统有12格，在1200px以上的设备中，.container提供了最大宽度：1170px。这让人很疑惑，因为12除不尽1170，如果最大宽度为1200px就好了，但事实并非如此，我们来看bootstrap.css源码：



bootstrap左右两边默认设置的“间隔”是15px，这就可以理解为啥最大宽度是1170：bootstrap设计者为了在1200px宽的设备两边留出一定的空白，预设是15px，因此最大宽度只好是1170px了，受应试教育影响的我们可能感染了某种幻觉：如果计算出来的数字不够和谐，就要怀疑是不是哪儿错了。可人家老外没这种凑整的想法，你看，栅格宽度用的都是百分比：



有人可能会说，container的width是1170，左右padding是15，所以加起来宽正好1200。其实我也为此困惑了一小会儿，但翻了下源码就明白不是这样滴：



全是border-box啊。

这下就好理解为啥要给row设置-15px的margin了。因为container总宽只有1170,左右共有30的padding，于是包在container里面的row最大宽度就只有1140，这下所有col栅格的百分比乘的都是1140而不是1170，这怎么行呢。只好用负的margin来增加宽度。

那为啥用负的margin可以增加宽度呢，这涉及到盒模型的原理。《CSS权威指南》中给出了一条原则：块元素左右外边距、左右border、左右内边距和width这七个值必须等于包含块content的宽。对于row而言，包含块container的content宽为1140px，row的那七个值-15px+0+0+width+0+0+（-15px）必须等于1140，因此width只好等于1170了。