Bootstrap柵格系統詳解
柵格系統介紹
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
http://v3.bootcss.com/css/#grid
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 了，這樣就可以實現任意的嵌套了。