柵格系統是通過行（.row）與列（column）的組合一起來創建頁面布局的，所以只有列（column）可以作為行（row）的直接子元素，我們所要寫的內容可以放在列里（column），不過在行的外層還需要定義一層來包含行（.row），這個外層為（.container）或者（.container-fluid），定義這一層是為了方便為行（.row）賦予合適的排列（aligment）和內補（padding）。
(.container)表示固定寬度，即行的寬度是固定的，而且水平居中，即使行的元素是塊級元素，它也不會占滿一行，這個固定的寬度是多少呢，bootstrap已經規定了，即如下：
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
(.container-fluid)表示100%寬度，即行的寬度100%，占滿了一行
列與列的間隔通過設置列所在元素的padding屬性，如果一行中包含的列的數量大於12，那么剩余的列就會作為一個整體另起一行，
根據屏幕大小，列所對應的類前綴分別為：
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
后面就可以寫上你所想要的大小了，只要 <= 12 就可以了。
可以使用 （.col-md-offset-*）將列向右側偏移，比如 .col-md-offset-3就是將列向右偏移3列。
在一列里還可以再次定義行（.row）和列實現柵格布局。
注意：
在列的這一部分里如果有自定義的class，需放在后面，即放在定義列的class后面，代碼如下：
<li class="col-md-3 col-sm-6 col-xs-12" class="li_style">
當然，你也可以只使用一個class，將它們放在一起，那么這時放在哪都可以了。比如：放在后面
<li class="col-md-3 col-sm-6 col-xs-12 li_style">