大家都知道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,會發(fā)生什么呢?

Paste_Image.png

后面兩個列會因?qū)挾炔粔蚨粩D下去，這是因為Bootstrap的所有列采用浮動布局，如果某一列定寬而導致改行排列不下，后面的列便會被擠下去。
在此舉一反三，研究一下Bootstrap的柵格布局原理

Paste_Image.png

在Bootstrap源碼中，針對大屏設(shè)備1200px，container寬度設(shè)計為1170px是為了保證1200px寬的設(shè)備兩邊留白，使其不至于占滿屏幕。
Bootstrap的柵格系統(tǒng)是一個三層結(jié)構(gòu)，除了外圍的container和內(nèi)部的column，中間還有一個夾層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，為解決此問題，Bootstrap在container中新增了一個夾層row，通過使用負的margin增加row的寬度至1170px。這里用到了盒模型尺寸的計算原理：塊元素左右外邊距、左右border、左右內(nèi)邊距和width這七個值之和必須等于包含塊的content width。row的包含塊container的content width為1140px，因此對于row而言，就存在如下等量關(guān)系：

-15px+0+0+width+0+0+（-15px）= 1140

于是row的width就自動擴展到1170px了。

這樣是不是顯得有點多此一舉呢？既然container左右兩邊都有15px的外邊距了，為什么還要設(shè)計15px的內(nèi)邊距？如果沒有這個內(nèi)邊距，不就不需要額外添一個夾層row了嗎？
這里就是Bootstrap設(shè)計的精巧之處：因為柵格之間需要間隔，因此每個column柵格都設(shè)置了15px的padding
這意味著每個column實際上也可以看成一個container！我們可以在任意一個column內(nèi)再嵌套一個柵格系統(tǒng)，而無需再添加container，只需添加一個row即可，不要將row理解成“行”，它就是一個包含塊而已。這樣的三層結(jié)構(gòu)使得Bootstrap成為了一個可以無限嵌套的響應(yīng)式系統(tǒng)，每一個柵格都可以看做一個獨立的系統(tǒng)，container只不過是那個最大的柵格而已。

另外，Bootstrap柵格系統(tǒng)預(yù)設(shè)的數(shù)值，如列數(shù)、槽寬以及媒體查詢閾值都是可以修改的?？啥ㄖ苹撬袃?yōu)秀框架的另一個共同品質(zhì)。

列排序與列偏移

Bootstrap將所有列的position都設(shè)成了relative，就在于可對列進行定位或排序，比如要將某一個列定位到12分之3處（即從第三、四列交界處開始），可以設(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ū)域沒辦法安放其它的列。

 .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }