這個標題取的有點奇怪，怪我翻譯的有問題吧。英文學平有限，有道詞典和google翻譯齊上陣是必須的。還好翻譯的不是小說，對於技術文章，還是能勉強翻過來的。
本文主要講解了Bootstrap3.0的柵格佈局系統實現原理，以及使用過程中應該注意的問題。
開始...翻譯..
像CSS柵格系統原理這類東西本應該藏在簾子後面，你直接用就可以了，沒必要去了解其背後的工作原理，除非你有了比較爛的設計或者一些比較複雜的東西，
當你無法找出spacing, margin, padding等這些補白全都亂的原因，那就真的很苦逼了，尤其是在某些動態改變和變化的UI上。
在關於bootstrap的柵格系統工作原理上我見過很多人都對它比較困擾、懊惱，每次都需要我解釋很多遍後別人才能理解，
所以我樂意用快速和視覺化的方式來解釋為什麼bootstrap柵格系統能玩得動，沒必要解釋很多。讓我們一起找出Bootstrap是如何利用巧妙的技巧實現柵格系統的
HTML正確的基本結構：
<div class="container"> <div class="row"> <div class="col-xs-12"></div> </div> </div>
Container
Container這個容器class為.container類有2個目的
1、在響應式寬度上提供寬度約束。響應式尺寸的改變其實改變的是container，行(rows)和列(columns)都是基於百分比的所以它們不需要做任何改變；
2、提供padding以至於不內容不直為緊貼於瀏覽器邊緣，兩邊都是15px，下圖中粉色的就是了，稍後解釋更多；
在一個container中永遠不需要再嵌一個container，記住永遠不要。
你將會看到為什麼
Row
行(Row)Class為.row的容器
row為col提供了空間，理想上一行上分了12 col，當所有col都向左浮時row也就扮演了容器角色，另外當浮動有問題時row也不會重疊
Rows 的兩側都擁有獨特的負15px margin值,如下圖中藍色部分. 被當作為row的div被約束在container內邊界與粉色區域重疊，但沒超過。這負的15px margin值把row的推出了container的15px padding，並與之重疊，本質上講就是負出去。為什麼這麼做呢？原因得看列(col)的工作原理，下面我們會看到
永遠不要在container外用row, row在container外面使用是無效的
Column
列(col)現在有15px的padding了，如下圖中黃顏色部分。Container的正padding值造成了15px的留空，row用負margin值反的延伸回去，
所以現在col的padding值與container的padding重疊了
永遠不要在row外使用col,在row外使用col是無效的
Content Within a Column
列(col)的padding給內容提供了空白，使內容不會緊貼在瀏覽器邊界上，列之間有了padding才不會互相緊貼在一起。
container/row/column整這麼些事兒最終要達到的結果就體現在這裡了，就是為了col的補白啊...
Nesting巢狀
當你設定了container,row,column後，你可以在column內再建立新的柵格系統。你在右側的列(col)內新增新的行(row)時不需再嵌container了
為什麼巢狀時不需要新的container了？
這個技巧在於列(col)扮演了container一樣的角色，列也有15px的padding值，它一樣允許行(row)的負margin值,它內部的列、內容間的補白等都一樣能很好的工作了
Offsets 偏移
偏移的實現相當簡單，僅僅是在列(col)的左側加上了margin值，
唯一比較怪的地方可能是在最左側的col是從-15px的row的margin值開始偏移的，中間的列的偏移則是直接從前一個列開始偏移，分割分離出補白。
除此之外，偏移就表現的像列(col)一樣
Push and Pull 列的排序
(直譯過來應該是“推和拉”但實際使用過程中更多的表現為互換位置進行排序)
讓我們先從為什麼需要對列進行排序說起：基於響應式佈局，對佈局進行翻轉，尤其是對移動裝置上對列進行重新排列，
對於pc桌面來說push and pull允許你打破HTML中div從上到下從左到右的固定佈局
可能讓人比較困惑的是push pull的實現是通過新增position而不是通過新增margin值實現。
Push新增的是left值，pull新增的是right值。當然在新增left或者right值之前它們的容器已經是相對定位了。
上圖那麼做就有問題，它會導致列重疊，而不像正常的列或者列偏移。
所以如果你push了一個列到右側，它就會疊在右側的列上，反之亦然。
所以一般我們總是“互換”，如果你push一個列到右側，那麼你得pull右側的列到左側，或則也對右側的列進行處理。
The Reasoning Behind It 總結一下背後的原理
Container:
正是由於container這樣設計才讓content的兩側擁有15px的padding值的補白，
另外，整個body擁有15px的padding值，這使整體上不會緊貼瀏覽器的邊緣，當然如果對於滿屏設計並帶有背景色的div就不好了..
Rows:
行(row)擁有負的margin值，並且值等於container的padding值，以至於邊界與container得以重疊（相等）
，負的margin值疊在了padding上，這讓row看起來沒被container的padding所影響.為啥？自行腦補..
Columns：
列(col)又擁有15px 的padding，所以能真正讓content擁有15px的補白,而又讓列之間擁有了15px+15px的中間補白，
正是因為如此，這個柵格系統不需要像960排版（blueprint, 等）系統似的對第一列或最生一列進行特殊的處理。
現在不管怎樣在列之間都擁有15px的空白了。
Nested Rows：
巢狀行的原理就像上面一樣，只是它的重疊住了列的padding，其實就把外面的列當作container了，
本質上列扮演了container的角色，所以巢狀行時你不再需要container
Nested Columns:
巢狀列沒什麼好講的了，和上面一樣
Offsets:
偏移的本質就是分割空白間隔，通過增加空白間隔達到你想要的距離，非常的簡單
Push/Pull:
Push和pull用於主要用於變換左右列的位置，當你有一個特別的設計並且offset偏移用著不給力的時候，你可以用它們來改變位置
Common Problems
這裡有些普遍會發生的bug值得注意，一些bug在HTML中很容易就能看出來.
缺少Container：第一個容易產生bug的地方是忘記新增container。沒有container意味著沒有padding與行(row)的負margin直相抵消，
意味著行會超出父元素。當元素處於瀏覽器邊緣時，這是最普遍的造成奇怪的橫向滾動的原因
缺少row:
第二個普遍問題是少了row,這與缺少container產生的問題相反，content與瀏覽器/viewport的邊緣擁有了30px的距離，
比正常值多了一倍。而且你的列浮動也會產生問題。由於缺少了外面row的包裹，浮動沒有得到正常的清除，所以浮動就可能產生問題。
同樣，當你試圖巢狀柵格系統時，同樣新嵌進去的content離左側的邊距達到了45px
Container內的元素再嵌container:在container內任意元素內再嵌container會導致很多問題，如雙倍的padding值，空白間隔，怪異的橫向滾動
偏移/push/pull:
當使用偏移或者排序(push/pull),偏移很簡單不會出什麼問題，push/pull卻不同，如果你push太多，列會超出它的container，記住只是使用正常的值主不會有問題
這些就是在使用bootstrap3.0的基礎柵格系統時時產生的問題，如果你在設計裡有很多的巢狀碰到問題，
或你的響應式佈局沒按照你所希望的方式工作，先看看上面這幾點，是不是這些問題產生的。
如果你修復了上面說的問題，基本上除了你自定義的佈局外bootstrap3.0的佈局問題基本上都能搞定了
That’s It
這就是bootstrap3.0的工作原理。它真的很聰明並提供了極好的解決方案。在這麼多年使用柵格系統的經驗中，
我個人覺得它是實現的最優雅的。雖然看到到這片文章寫了這麼多會可能覺得bootstrap3.0的柵格系統很複雜，
但如果不從整體詳細的瞭解其內部的實現原理的話，在實際使用中，它確實是使用了簡單的CSS，提供了我們一個好用的柵格系統。
========================================================
英文原文：http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
========================================================
轉載處請註明：部落格園(王二狗)willian12345@126.com