2.2.1　实现原理

栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询，就制作出了强大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12份，在使用的时候大家也可以根据情况通过重新编译LESS源码来修改12这个数值。

栅格系统的主要工作原理如下：

❑一行数据（row）必须包含在.container中，以便为其赋予合适的对齐方式和内边距（padding）。

❑使用行（row）在水平方向创建一组列（column）。

❑具体内容应当放置于列（column）内，而且只有列（column）可以作为行（row）的直接子元素。

❑内置一大堆样式，可以使用像.row和.col-xs-4（占4列宽度）这样的样式来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

❑通过设置padding从而创建列（column）之间的间隔。然后通过为第一列和最后一列设置负值的margin从而抵消掉padding的影响。

❑栅格系统中的列是通过指定1到12的值来表示其跨越的范围的。例如，要让屏幕分为3个等宽的部分，可以使用3个.col-xs-4来创建。

为了方便大家理解，笔者画了一张示意图，如图2-2所示。我们来一步一步解释一下。

图2-2　CSS12栅格系统

1）最外层的边框。由于在设计栅格系统的时候，从头到尾都伴随着响应式设计的思想，所以作者在开发的时候，区分了4种类型的浏览器（超小屏、小屏、中屏、大屏），其像素的分界点分别是768px、992px以及1220px。

2）第二层的边框。该边框也就是我们所说的.container样式容器，针对4种不同宽度的浏览器，.container样式的宽度也不一样，就像示意图里所说的，其值分别是：自动、750px、970px、1170px。其中自动表示，如果你选择了全部12格填充，那就是100%充满这个超小屏幕。

3）1号横条。该横条内部总共有12个列表，根据源码的885～886行可以看出，每个列都有15px的左内边距（padding-left）和右内边距（padding-right）。这样就又导致一个问题，第一个列的padding-left和最后一列的padding-right占据了总共30px的宽度，从而导致页面不美观（当然，如果要留白，也没问题）。

4）2号横条，也就是row容器的定义，在row的CSS的定义里，将margin-left和margin-right都定义为-15px（源码810行），组合row和列以后，就会形成3号横条的效果。这也就是我们期望的左右宽度用满的效果。

5）对于4号横条，主要是想表达12个列可以自由组合，可以用完12个，也可以只用一部分，只要符合“col-md-数字”的规则就可以（md是中型屏幕的样式，后面会讲到其他3种形式）。

最后，再来看一下.container样式的源码。

// 源码734行
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container { width: 750px;    /*小型屏幕时,container样式的宽度*/  }
}
@media (min-width: 992px) {
  .container { width: 970px;    /*中型屏幕时,container样式的宽度,缩小min-width范围*/}
}
@media (min-width: 1200px) {
  .container { width: 1170px;   /*大型屏幕时,container样式的宽度,再次缩小min-width范围*/}
}

为什么这么设置？就是因为row样式定义了-15px的外边距，所以为了消除2号横条的溢出，需要用row的容器元素（也就是container样式元素）的padding值进行修补。

换句话，如果想让row充满全屏100%显示，那就不能用container样式了，因为container样式针对4个不同的屏幕大小固定了尺寸。这样，就得自己定义一个100%的样式，但是要注意的就是：别忘记修复-15px的外边距（即设置15px的左右padding值）。

除了上述原理，在实现细节上还有一些技巧，这部分的CSS分析，我们将结合基本用法进行讲解。