Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅栏系统简介
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding
栅栏参数
栅栏系统示例
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超过12将会重起一行
<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> 响应式列重置
<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>
屏幕缩小时的情况
列重置只要是为了处理某些列可能会出现比别的列高的情况，在屏幕缩小时保证按照顺序进行排列
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>
- 当偏移数值和第二个网格大小和大于12时将会重起一行
<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>
