大家都知道Bootstrap中的列會(huì)均分一行的寬度呢簸。
<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>
效果如下圖：
如果container容器給定的寬度是600px，再給第一個(gè)col-lg-4的寬度大于200px,會(huì)發(fā)生什么呢?
后面兩個(gè)列會(huì)因?qū)挾炔粔蚨粩D下去会涎，這是因?yàn)锽ootstrap的所有列采用浮動(dòng)布局，如果某一列定寬而導(dǎo)致改行排列不下颠毙，后面的列便會(huì)被擠下去魔招。
在此舉一反三，研究一下Bootstrap的柵格布局原理
在Bootstrap源碼中嵌溢，針對(duì)大屏設(shè)備1200px眯牧，container寬度設(shè)計(jì)為1170px是為了保證1200px寬的設(shè)備兩邊留白，使其不至于占滿屏幕赖草。
Bootstrap的柵格系統(tǒng)是一個(gè)三層結(jié)構(gòu)学少，除了外圍的container和內(nèi)部的column，中間還有一個(gè)夾層row秧骑，并且Bootstrap要求所有的column必須包含在row里面版确，這是為什么呢扣囊？
Bootstrap將所有元素的盒模型設(shè)置為了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的內(nèi)容寬度就只剩1140px侵歇，這下所有col柵格的百分比乘的都是1140而不是1170，為解決此問(wèn)題吓蘑，Bootstrap在container中新增了一個(gè)夾層row惕虑，通過(guò)使用負(fù)的margin增加row的寬度至1170px。這里用到了盒模型尺寸的計(jì)算原理：塊元素左右外邊距士修、左右border枷遂、左右內(nèi)邊距和width這七個(gè)值之和必須等于包含塊的content width。row的包含塊container的content width為1140px棋嘲，因此對(duì)于row而言酒唉，就存在如下等量關(guān)系：
-15px+0+0+width+0+0+（-15px）= 1140
于是row的width就自動(dòng)擴(kuò)展到1170px了。
這樣是不是顯得有點(diǎn)多此一舉呢沸移？既然container左右兩邊都有15px的外邊距了痪伦，為什么還要設(shè)計(jì)15px的內(nèi)邊距？如果沒(méi)有這個(gè)內(nèi)邊距雹锣，不就不需要額外添一個(gè)夾層row了嗎网沾？
這里就是Bootstrap設(shè)計(jì)的精巧之處：因?yàn)闁鸥裰g需要間隔，因此每個(gè)column柵格都設(shè)置了15px的padding
這意味著每個(gè)column實(shí)際上也可以看成一個(gè)container蕊爵！我們可以在任意一個(gè)column內(nèi)再嵌套一個(gè)柵格系統(tǒng)辉哥，而無(wú)需再添加container，只需添加一個(gè)row即可攒射，不要將row理解成“行”醋旦，它就是一個(gè)包含塊而已。這樣的三層結(jié)構(gòu)使得Bootstrap成為了一個(gè)可以無(wú)限嵌套的響應(yīng)式系統(tǒng)会放，每一個(gè)柵格都可以看做一個(gè)獨(dú)立的系統(tǒng)饲齐，container只不過(guò)是那個(gè)最大的柵格而已。
另外咧最，Bootstrap柵格系統(tǒng)預(yù)設(shè)的數(shù)值捂人，如列數(shù)、槽寬以及媒體查詢閾值都是可以修改的矢沿±拇睿可定制化是所有優(yōu)秀框架的另一個(gè)共同品質(zhì)。
列排序與列偏移
Bootstrap將所有列的position都設(shè)成了relative咨察，就在于可對(duì)列進(jìn)行定位或排序论熙，比如要將某一個(gè)列定位到12分之3處（即從第三、四列交界處開(kāi)始）摄狱，可以設(shè)置left:25%或者right:75%脓诡。Bootstrap已經(jīng)預(yù)設(shè)好了相應(yīng)的類名：
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
列偏移的不同之處在于使用margin无午，而被margin擠占的區(qū)域沒(méi)辦法安放其它的列。
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
