BootStrap笔记7

栅格布局

运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。

1.栅格系统

运用Bootstrap的栅格系统，首选需要准备一个class=container的div
紧接着需要一个class=row的 div，表示行
再挨着的div，就是列了。

Bootstrap的栅格系统会默认把一行，分成12列。

<div class="container">
    <div class="row">
        <div class="col-xs-12 ">一共12列</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
    </div>
</div>

注：一行不是必须添满的，比如上面的1/4，只填了3个 1/4，最后一个1/4就可以空着

2.自动换行

当同一行的栅格总数超过12的时候，就会自动换行

<div class="container">
    <div class="row">
        <div class="col-xs-8 ">8格</div>
        <div class="col-xs-6 ">6格</div>
    </div>
</div>