3.1 使用栅格系统

所谓的栅格系统，就是分列。传统的方法，是设置div的float属性，需要控制每个div的宽度、间距等细节。bootstrap提供了简单好用的类来解决这个问题。
规则如下：
col-md-x，x是1到12的整数
bootstrap把一个容器（通常就是div）的宽度分成12份，容器里面的元素要占用多少份，就设置多少，例如col-md-4，表示容器左边的4/12
为啥是12这个数字呢，因为可以方便地分出1/2，1/3，1/4，1/6

bootstrap引入一个容器类container，这个容器居中，有一定的宽度（不同屏幕下宽度会变化），还有一个类row，表示一行，方便在container里面有多行的时候使用。
如果有多行需要分别分列，例如第一行分4、4、3，第二行分6、6。那么需要用到row这个类，它代表一行，用一个div包住所有行，然后这个div的类包含row:
<div class="row">
    <div style="background:#999" class="col-sm-4 col-xs-12 text-center ">12341</div>
    <div style="background:#C90" class="col-sm-offset-1 col-sm-3 col-xs-6">3432</div>
    <div style="background:#F60" class="col-sm-4 col-xs-6">2434<ul class="list-unstyled">
    <li>fdsfd</li><li>fdsfd42134</li><li>fdsfd424</li><li>fdsfddfds</li><li>fdsfd8788</li>
    </ul></div>
    </div>
    
     <div class="row">
    <div style="background:#0FC" class="col-sm-6 text-center ">12341</div>
    <div style="background:#96C" class="col-6">3432</div>
    
    </div>