bootstrap 栅格系统

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>

5> 嵌套列