| 超小屏幕 手機 (<768px) | 小屏幕 平闆 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系統行為 | 總是水平排列 | 開始是堆疊在一起的，當大于這些阈值時将變為水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
使用單一的一組 .col-md-* 栅格類，就可以創建一個基本的栅格系統，在手機和平闆設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 内。
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-* 和 .col-md-*。請看下面的實例，研究一下這些是如何工作的。
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
在上面案例的基礎上，通過使用針對平闆設備的 .col-sm-* 類，我們來創建更加動态和強大的布局吧。
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
如果在一個 .row 内包含的列（column）大于12個，包含多餘列（column）的元素将作為一個整體單元被另起一行排列。
.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
Subsequent columns continue along the new line.
即便有上面給出的四組栅格class，你也不免會碰到一些問題，例如，在某些阈值時，某些列可能會出現比别的列高的情況。為了克服這一問題，建議聯合使用 .clearfix 和 響應式工具類。
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
使用 .col-md-offset-* 類可以将列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類将 .col-md-4 元素向右側偏移了4個列（column）的寬度。
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
為了使用内置的栅格系統将内容再次嵌套，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須占滿12列）。
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9