Bootstrap 提供了一套響應(yīng)式导匣、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)逃贝，隨著屏幕或視口（viewport）尺寸的增加蹦锋，系統(tǒng)會(huì)自動(dòng)分為最多12列甸私。
柵欄系統(tǒng)簡(jiǎn)介
- “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中渣锦，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）硝岗。
- 通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）泡挺。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding辈讶，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding
柵欄參數(shù)
柵欄系統(tǒng)示例
1> 水平排列
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-3" style="background-color: #00AA88;height: 100px">.col-md-3</div>
<div class="col-md-3" style="background-color: #0D3349;height: 100px">.col-md-3</div>
<div class="col-md-3" style="background-color: #00CC00;height: 100px">.col-md-3</div>
<div class="col-md-3" style="background-color: #00b3ee;height: 100px">.col-md-3</div>
</div>
</div>
</div>
2> col超過(guò)12將會(huì)重起一行
<div class="row">
<div class="row">
<div class="col-md-5" style="background-color: #00AA88;height: 100px">.col-md-3</div>
<div class="col-md-9" style="background-color: #0D3349;height: 100px">.col-md-3</div>
<div class="col-md-8" style="background-color: #00CC00;height: 100px">.col-md-3</div>
<div class="col-md-1" style="background-color: #00b3ee;height: 100px">.col-md-3</div>
</div>
</div>
3> 響應(yīng)式列重置
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color: #00b3ee;height: 200px;">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color: #00CCFF;height: 100px;">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #3c763d;height: 100px;">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color: #6B6464;height: 100px;">.col-xs-6 .col-sm-3</div>
</div>
屏幕縮小時(shí)的情況
列重置只要是為了處理某些列可能會(huì)出現(xiàn)比別的列高的情況，在屏幕縮小時(shí)保證按照順序進(jìn)行排列
4> 列偏移
<div class="row">
<div class="col-md-4" style="background-color: #00CCFF;height: 100px;">.col-md-4</div>
<div class="col-md-4 col-md-offset-4" style="background-color: #00CC00;height: 100px;">.col-md-4 .col-md-offset-4</div>
</div>
- 當(dāng)偏移數(shù)值和第二個(gè)網(wǎng)格大小和大于12時(shí)將會(huì)重起一行
<div class="row">
<div class="col-md-4" style="background-color: #00CCFF;height: 100px;">.col-md-4</div>
<div class="col-md-4 col-md-offset-8" style="background-color: #00CC00;height: 100px;">.col-md-4 .col-md-offset-4</div>
</div>
