柵格系統介紹
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。
但在較復雜的頁面上出現問題，間隔，內外邊距常困擾開發人員，需要深入源碼和文檔理解柵格系統才能運用自如。
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
Bootstrap 柵格系統的精妙之處, 通過container, row, column都有15px的padding槽邊和 row的margin -15px設置，巧妙實現在 column 中嵌套 row進行nesting 擴展(超過12列)，而不需要再套一層 container

Container作用
在隨時可能的寬度變化(響應式)中提供寬度限制。當頁面寬度變化，container 的寬度也隨之變化。并且其中的 column 的寬度是基于百分比，所以他們的值不需要變化。
提供一個水平方向的 padding，使其內部的內容不會接觸到瀏覽器的邊界，大小為15px，就是圖片中粉紅色的部分。
注意，不需要也不應該在 container 中嵌套另一個 container。
Row作用
Row 是 column 直接存在的容器，按照文檔描述 row 中最多可有12個 column，不過可以通過 nesting 的方式靈活擴展。同時作為都是左浮動的 column 的 wrapper，自帶 clearfix 的性質。
row 左右各有 －15px 的 margin，就是圖片中的藍色部分。這樣也就抵消了上面提到的 container 中15px的 padding，這是bootsrtap柵格系統的精妙之處。
注意：千萬記住要把 row 放到 container 的內部，這樣才能保證正常。
Column作用
每個column 也會有15px的水平方向的 padding，也就是圖片中黃色的部分，colunmn 只能在 row 中生存，由于 row 的 margin 為－15px，那么位于兩邊的 column 就碰到了 container 的邊界。但是 colunmn 本身又有 15px 的 padding 使得它其中的內容并不會碰到 container，同時 不同column的內容之間就有了30px的槽。結合圖片看一下就一目了然了。
注意：一定要把 column 放到 row 里使用。
nesting擴展
通過container, row, column都有15px的padding槽邊和 row的margin -15px設置，巧妙實現在 column 中嵌套 row進行nesting 擴展(超過12列)，而不需要再套一層 container
在 nseting 的時候 column 的作用也相當于 container 了，這樣就可以實現任意的嵌套了。

禁止響應式布局有如下幾步：
移除 此 CSS 文檔中提到的設置瀏覽器視口（viewport）的標簽：<meta>。
通過為 .container 類設置一個 width 值從而覆蓋框架的默認 width 設置，例如 width: 970px !important; 。請確保這些設置全部放在默認的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒體查詢中，也可以略去!important 。
如果使用了導航條，需要移除所有導航條的折疊和展開行為。
對于柵格布局，額外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。 不要擔心，針對超小屏幕設備的柵格系統能夠在所有分辨率的環境下展開。
針對 IE8 仍然需要額外引入 Respond.js 文件（由于仍然利用了瀏覽器對媒體查詢（media query）的支持，因此還需要做處理）。這樣就禁用了 Bootstrap 對移動設備的響應式支持。