Bootstrap响应式栅格系统设计
为了方便起见，我们通过1200px宽的屏幕来讲解bootstrap中container、row、col的css属性值为何这样设置的原理
在1200px屏幕中为何container的宽度设置为1170px?
为了在1200px宽的设备两边留出一定的边距，因此将container的宽度设置为1170px，同时margin-left:auto和margin-right:auto将container居中，从而确保屏幕两边各留出15px的边距；
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;/*下文解释为何padding设置为15px*/
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
为何col要留出15px的padding-left与padding-right？
为了创建栅格列与列之间的间隔(gutter)，因此将col的padding-left与padding-right均设置为15px；
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;/*下文解释为何要设置position为relative*/
min-height: 1px;/*下文解释为何min-height设置为1px*/
padding-right: 15px;
padding-left: 15px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
既然container左右两边都有15px的外边距了，为何还要设计15px的内边距呢？
原来，bootstrap通过将col看做一个容器，往里面再嵌入12个col(一个栅格系统)，以此实现嵌套列的功能，从而达到无限嵌套的目的；
因此从某种程度上，bootstrap把container当做一个最大的col(想象一下container中放一个col-12的情景，此时两者的padding与width均一致)，所以container和col一样，其padding-left和padding-right也均被设置成15px，从而达到container与col相统一的目的。
那为何bootstrap还设计了row，并且要求row必须包含在.container(固定宽度)中呢？
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
clear: both;/*用于清除浮动;*/
}
还记得，刚刚为了统一处理container与col而将container的左右内边距设置为15px的操作吗？由于bootstrap将所有元素的盒模型都设置为了boeder-box
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
上述15px的操作导致了container的content width从1170px，变成1140px，这下导致所有col栅格的百分比乘的都是1140而不是1170了；因此bootstrap在container中新增了row这个夹层，通过设置负值 margin从而抵消掉为 container 元素设置的 padding，使得row的宽度增加至1170px，从而使得col栅格的百分比乘的都是正确的1170；(也就间接为row所包含的col抵消掉了padding);
这里用到了盒模型尺寸的计算原理：块元素左右外边距、左右border、左右内边距和content width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px，因此对于row而言，就存在如下等量关系：
-15px+0+0+width+0+0+（-15px）= 1140
因此，row的width就自动扩展到1170px了。
为何col要设置position为relative呢？
为了实现列定位或列排序
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
结合col的position为relative的属性，通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
那为什么col要设置一个min-height为1px呢？
这是因为每个col为了保持占有自己的格子(就算没有内容，也占该有的栅格)；如果不设置min-height为1px，在col没有任何内容的情况下，后面有内容的col会float到前面没有内容的col的栅格位置，这是我们不希望看到的。
好了，到这里我们就解释了bootstrap的栅格系统中最重要的三个部分container、row和col它们样式设置的原理。
另外，关于列偏移
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
列偏移与列排序(定位)的不同之处在于使用margin，而被margin挤占的区域没办法安放其它的列。
另外，关于流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
- 上一篇 »【css】响应式布局入门【转】
- 下一篇 »实现响应式——Bootstrap的删格系统详解
