Bootstrap手冊里對自身的柵格系統講解的比較古板。初上手的朋友讀完一遍也是雲里霧里，在此說一說我個人的理解。什么是柵格系統？請參看我寫的前兩篇文章 網頁設計中的960柵格系統（一）和 網頁設計中的960柵格系統（二）
抽象的表格
Bootstrap的柵格系統能自動根據當前設備的屏幕分辨率，橫向分配出12個等寬的單元格，你完全可以理解為bootstrap柵格系統就是一個具有相等寬度的12列表格，然后把具體的網頁內容，放進這些單元格里。通過前綴為col- 的class數值變換，實現單元格之間的合並和拆分。總之，單元格數量要小於等於12 ，例如：
單元格的承載
在使用這些單元格之前還要求在最外面套上兩個div容器來承載，具體書寫代碼如下；
Container 負責整個屏幕的內容承載，不管里面的單元格怎么擺放，保證不會跑出這個圈子。
Row 代表一個整行（不限制高度）
… 表示你的代碼片段，可隨便嵌套。
我們通過控制col-xx-xx的大小拆分，就能實現各種欄目的尺寸修改，當然它們之間是有一個默認間距的存在。接下來，我們研究一下如何調整這個默認的間距。
柵格的間距
Bootstrap柵格系統采用了劇中方式布局，也就是在單元格左右各自定義了15px的padding，從而造成相鄰兩列的間距為30px，這個數值不一定適合每一個網站，所以我們希望能修改它。
下面我通過一個兩列布局的效果來說明，試驗的前置條件；做一個固定寬度960px的div盒模型padding=0px margin=0px，目的是對比觀察bootstrap柵格系統的默認狀態和尺寸。為了效果醒目，我把高度都寫死為100px。這里我用col-md- 的class來實施，效果如下：
結論：
1. bootstrap柵格在中等尺寸屏幕里的寬度為970px，隨着屏幕分辨率的不同這個值也會自動調整，這不是關注重點，重點在於保證了固定寬度且居中對齊的布局效果。
2. Container 和row 兩個承載容器的padding=0 margin=0
3. col-類的內邊距padding：0px 15px ，並且不能通過復寫col類的樣式來控制padding尺寸。
4. 只能通過定義col的子級元素來實現15px間距覆蓋，在子元素的css中要添加margin：0px -15px；最終效果如下圖
顯而易見，只要我們調整子元素的margin邊距，就能實現左右分欄的間距大小。
跨屏布局
直觀的講，我們把md、lg、 xs、sm 這四個類放入一個div標簽后，這個div容器就可以自動實現不同設備的跨屏，只要記住超出的右側容器會浮動向下排列就行。比如；一個兩列布局的頁面，它在pc端可能左側寬度達到了700px，右側是270px，通過手機訪問后（屏幕寬度只有340px），它先顯示左側700px的分欄內容並且填充滿一行340px，但這個容器里的內容會浮動的垂直排列。之后再垂直排列右側270px的分欄容器。書寫代碼見圖
隱藏顯示
Bootstrap框架利用css3的媒體查詢為我們准備了一個“響應式工具”，利用這些預定義的類，我們可以在不同設備上呈現同一個頁面中的不同內容。為了區別於官方手冊，我這里不羅列他的類型列表，只舉個列子說明。（官方建議只考慮手機設備）
.visible-xs-block 在手機設備中顯示為塊級元素。
.visible-xs-inline 在手機設備中顯示為內聯元素
.visible-xs-inline-block 在手機設備中顯示為行內塊元素。
.hidden-xs 在手機設備中不顯示
其他
剩下幾個和柵格單元有關的類，比較簡單。看手冊案例可以秒懂，不羅嗦了。
左右分欄位置互換
.col-md-push-* 柵格列向右移動
.col-md-pull-* 柵格列向左移動
（*號代表小於12的數值，這個由你根據頁面效果自己定義。）
柵格列偏移，只能向右側偏移
.col-md-offset-*
（*號代表小於12的數值，這個由你根據頁面效果自己定義。）
感謝閱讀
如需轉載，請添加原文鏈接，算是對本人碼字的支持。轉：http://www.wangyongfeng.cn/article/119