Bootstrap之栅格布局

Bootstrap之栅格布局

最近在学习基于boostrap下的栅格布局，这个布局功能非常强大，提供了一套响应式的布局解决方案，可实现在PC端，平板端和移动端切换。下面是一些总结：

1.栅格盒模型的精妙之处

容器两边具有15px的padding;
行：两边具有-15px的margin；
列：两边具有15px的padding；
为了维护槽宽规则，列两边必须要有15px的padding，为了能使列嵌套行，行两边必须要有-15px的margin，为了容器能包裹住行，容器两边必须要有15px的padding.

2.Bootstrap栅格系统&源码分析

我们在了解了栅格盒模型之后，还需要知道栅格系统的一些组成:
1.流体容器：.container-fluid，其样式定义为with：auto，两则为15px的padding；
2.固定容器：.container，固定容器存在4个阈值：
|阈值| with |
|xs(width小于760px）|width：auto|
| sm（width大于等于768）|width：720+槽宽 |
|md(width大于等于992px）|width：940+槽宽|
| sm（width大于等于1200）|width：1140+槽宽 |
3.行：两侧15px的padding；两侧