Bootstrap柵格系統的工作原理:
1，
.row 必須包含在.container （固定寬度）或.container-fluid （100%寬度）
中，以便爲其賦予合適的排列（aligment）和內補（padding）。 2，使用“行（row）”在水平方向創建一組“列（column）”。
3，你的內容應當放置於“列（column）”內，而且，只有“列（column）”可以作爲行（row）”的直接子元素。
4，類似Predefined
grid classes like
.row and .col-xs-4 這些預定義的柵格class可以用來快速創建柵格佈局。Bootstrap源碼中定義的mixin也可以用來創建語義化的佈局。 5，通過設置
padding從而創建“列（column）”之間的間隔（gutter）。然後通過爲第一和最後一樣設置負值的margin從而抵消掉padding的影響。 6，柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個
.col-xs-4來創建。（也就是說，對於網頁寬度，是平均分爲12列的。）通過下表可以詳細查看Bootstrap的柵格系統如何在多種屏幕設備上工作的。
| 超小屏幕設備 手機 (<768px) | 小屏幕設備 平板 (≥768px) | 中等屏幕設備 桌面 (≥992px) | 大屏幕設備 桌面 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行爲 | 總是水平排列 | 開始是堆疊在一起的，超過這些閾值將變爲水平排列 | ||
.container寬度 |
None (自動) | 750px | 970px | 1170px |
| class前綴 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列數 | 12 | |||
| 最大列寬 | 自動 | 60px | 78px | 95px |
| 槽寬 | 30px (每列左右均有15px) | |||
| 可嵌套 | Yes | |||
| 偏移（Offsets） | Yes | |||
| 列排序 | Yes | |||
實踐：
（1），這個柵格系統是向下兼容的。也即是說md的水平寬度在
總結：
container和fluid
container
container在大屏幕上時兩邊有一定的margin
而fluid
container沒有這個margin，直接就是全屏幕的
設備寬度：
超小屏幕設備 手機
(<768px) .col-xs-
小屏幕設備 平板
(≥768px) .col-sm-
中等屏幕設備 桌面
(≥992px) .col-md-
大屏幕設備 桌面
(≥1200px) .col-lg-
柵格寬度：
col-md-*
設備縮放自定義：
class="col-xs-12
col-sm-6 col-md-8"
柵格偏移：
.col-md-offset-*
柵格是默認左對齊的！
柵格嵌套：
只需要在col中增加row的div以及相應的col即可。
列排序：
通過使用
.col-md-push-* 和 .col-md-pull-*就可以很容易的改變列的順序。LESS
mixin和變量：
less可以讓css提供變量標誌。