一. 實現原理
網格佈局是通過容器的大小，平均分為12份(可以修改),再調整內外邊距,和表格佈局有點類似但是也存在區別。
實現步驟如下:
(1) 資料行.row 必須包含在容器.container 中, 以便賦予核實的對齊方式和內間距設定
<div class="container"> <div class="row"></div> </div>
(2) 在行(.row)中可以新增列(.column)，但列數之和不能超過平分的總列數，比如12
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div> </div> </div>
(3) 具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素
(4) 通過設定內距（padding）從而建立列與列之間的間距。然後通過為第一列和最後一列設定負值的外距（margin）來抵消內距(padding)的影響
二. 基本用法
<div class="container"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">col-md-8</div> </div> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-9">col-md-9</div> </div> </div>
以上程式碼中定義了兩行, 其中第一行比例為4:8，第二行比例為3:9，執行頁面效果如下圖
三. 引數介紹
通過下表可以詳細檢視 Bootstrap 的柵格系統是如何在多種螢幕裝置上工作的。
| 超小螢幕 手機 (<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） | 是 | |||
| 列排序 | 是 | |||
四. 偏移量
有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上新增類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那麼具有這個類名的列就會向右偏移。例如，你在列元素上新增“col-md-offset-4”，表示該列向右移動4個列的寬度。
<div class="container"> <h4>列向右移動四列的間距</h4> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div> </div> </div> <br /><br /> <div class="container"> <h4>發生行斷裂</h4> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-3">col-md-offset-3</div> <div class="col-md-4">col-md-4</div> </div> </div> <br /><br /> <div class="container"> <div class="row"> <div class="col-sm-2">col-sm-2</div> <div class="col-sm-2 col-sm-offset-2">col-sm-2</div> <div class="col-sm-2">col-sm-2</div> <div class="col-sm-3 col-sm-offset-1">col-sm-2</div> </div> </div>
執行頁面效果圖如下:
五. 列排序
列排序其實就是改變列的方向，就是改變左右浮動，並且設定浮動的距離。在Bootstrap框架的網格系統中是通過新增類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)
六. 巢狀
Bootstrap框架的網格系統還支援列的巢狀。你可以在一個列中新增一個或者多個行（row）容器，然後在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度
<div class="container"> <div class="row"> <div class="col-md-8"> 我的裡面巢狀了一個網格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> 我的裡面巢狀了一個網格 <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>