bootstrap解析-栅格系统

.container(布局容器)

屏幕宽1200px以上（col-lg）

1. 默认width为1170px
2. padding,lefet和right各为15px,因此内容width为1140px;

屏幕宽992px以上(col-md)

1. 默认width为970px
2. padding,lefet和right各为15px,因此内容width为940px;

屏幕宽768px以上(col-sm)

1. 默认width为750px
2. padding,lefet和right各为15px,因此内容width为720px;

屏幕宽768px如下(col-xs)

1. 默认width为100%
2. padding,lefet和right各为15px,因此内容width为100%-30px;

.container-fluid(流式布局容器)

1. width为100%
2. 其余和.container同样

.row(行)

1. 默认margin-left和margin-right为-15px;
2. 这样就抵消掉了.container的padding,row的显示区域width就为.container的width了
3. 利用::after清楚浮动

.col-(列)

1. 用@media来设置width对应百分比
2. padding,lefet和right各为15px
3. float:left
4. position:relative
5. min-height:1px

.col-*-offset-(移动)

1. 利用@media来设置margin-left相应的百分比

.col--push-和.col--pull-(列排序)

1. 因为col-设置了posistion:relative因此经过设置left(push)和righ(pull)来改变节点的位置。

其余状况

列的高度不一样时

解决 .clearfix(清除浮动)

1. 因为列都浮动了，因此阈值时会产生一些问题，所须要配合清除相应位置的浮动来解决

列大于12时

1. 因为列浮动了，因此超出的列会自动换行排列

嵌套

1. 因为以上属性设置，因此嵌套写.row和.col-就能够

bootstrap的栅格系统基本就是这些，因此也没什么神秘的，你本身也彻底能够写出本身的栅格系统来。
本篇博文首发于本人我的博客，查看更多点这里