節選翻譯自the subtle magic behind why the bootstrap 3 grid works
從接觸 bootstrap 已經有很長時間了，給人的感覺是快速，簡單，易上手，其中柵格系統是乙個亮點：
一直感覺像 css 柵格系統之類的東西拿過來用就好了，不用深究背後的原理。直到有一天你發現簡單的套用在稍複雜的頁面上出現問題，間隔啊，內外邊距啊，哪都不對勁兒。當然會有這樣的過程，然後隨著知識的積累，可以去讀一些 bootstrap 的原始碼，結合文件會發現一些不是很理解的地方：
rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。container 有兩個作用：
在隨時可能的寬度變化(響應式)中提供寬度限制。當頁面寬度變化，container 的寬度也隨之變化。並且其中的 column 的寬度是基於百分比，所以他們的值不需要變化。
提供乙個水平方向的 padding，使其內部的內容不會接觸到瀏覽器的邊界，大小為15px，就是中粉紅色的部分，作用會在下面說。
注意，不需要也不應該在 container 中巢狀另乙個 container。
同時 row 還有乙個很特殊的地方，就是左右各有 －15px 的 margin，就是中的藍色部分。這樣也就抵消了上面提到的 container 中15px的 padding，那麼為什麼要這麼折騰呢？接著看往下讀。
注意：千萬記住要把 row 放到 container 的內部，這樣才能保證正常。
注意啦，每個column 也會有15px的水平方向的 padding，也就是中黃色的部分，唉，先別急，會明白的。還記得上面提到的 row 的作用嗎，colunmn 只能在 row 中生存，由於 row 的 margin 為－15px，那麼位於兩邊的 column 就碰到了 container 的邊界。但是 colunmn 本身又有 15px 的 padding 使得它其中的內容並不會碰到 container，同時 不同column的內容之間就有了30px的槽。結合看一下就一目了然了。
注意：一定要把 column 放到 row 裡使用。
當把上面一系列的 container, row, column 都設定好，就可以通過 nesting 擴充套件它的柵格系統了，也就是在 column 中直接巢狀 row，而不需要再套一層 container：
還記得 container 和 column 都有15px的 padding 嗎，當 nesting 的時候 column 的作用也相當於 container 了，這樣就可以實現任意的巢狀了。
這正是 bootstrap 的柵格系統的最巧妙的地方！
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
Bootstrap柵格系統
bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。頁面中的一行，比例可以自己定義，但必須保證是12列，如果缺少...
bootstrap 柵格系統
cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...