大家都知道Bootstrap中的列会均分一行的宽度。
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
效果如下图：
Paste_Image.png
如果container容器给定的宽度是600px，再给第一个col-lg-4的宽度大于200px,会发生什么呢?
Paste_Image.png
后面两个列会因宽度不够而被挤下去，这是因为Bootstrap的所有列采用浮动布局，如果某一列定宽而导致改行排列不下，后面的列便会被挤下去。
在此举一反三，研究一下Bootstrap的栅格布局原理
Paste_Image.png
在Bootstrap源码中，针对大屏设备1200px，container宽度设计为1170px是为了保证1200px宽的设备两边留白，使其不至于占满屏幕。
Bootstrap的栅格系统是一个三层结构，除了外围的container和内部的column，中间还有一个夹层row，并且Bootstrap要求所有的column必须包含在row里面，这是为什么呢？
Bootstrap将所有元素的盒模型设置为了border-box
.row {
margin-right: -15px;
margin-left: -15px;
}
* {
-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;
}
因此container宽度为1170px，减去左右共30px的padding，于是container的内容宽度就只剩1140px，这下所有col栅格的百分比乘的都是1140而不是1170，为解决此问题，Bootstrap在container中新增了一个夹层row，通过使用负的margin增加row的宽度至1170px。这里用到了盒模型尺寸的计算原理：块元素左右外边距、左右border、左右内边距和width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px，因此对于row而言，就存在如下等量关系：
-15px+0+0+width+0+0+（-15px）= 1140
于是row的width就自动扩展到1170px了。
这样是不是显得有点多此一举呢？既然container左右两边都有15px的外边距了，为什么还要设计15px的内边距？如果没有这个内边距，不就不需要额外添一个夹层row了吗？
这里就是Bootstrap设计的精巧之处：因为栅格之间需要间隔，因此每个column栅格都设置了15px的padding
这意味着每个column实际上也可以看成一个container！我们可以在任意一个column内再嵌套一个栅格系统，而无需再添加container，只需添加一个row即可，不要将row理解成“行”，它就是一个包含块而已。这样的三层结构使得Bootstrap成为了一个可以无限嵌套的响应式系统，每一个栅格都可以看做一个独立的系统，container只不过是那个最大的栅格而已。
另外，Bootstrap栅格系统预设的数值，如列数、槽宽以及媒体查询阈值都是可以修改的。可定制化是所有优秀框架的另一个共同品质。
列排序与列偏移
Bootstrap将所有列的position都设成了relative，就在于可对列进行定位或排序，比如要将某一个列定位到12分之3处（即从第三、四列交界处开始），可以设置left:25%或者right:75%。Bootstrap已经预设好了相应的类名：
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
列偏移的不同之处在于使用margin，而被margin挤占的区域没办法安放其它的列。
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
网友评论