bootstrap3相关文档

，每列分配多列

<divclass="container"> <div class="row">

<div class="col-md-4a">1-4</div> <div class="col-md-4a">5-8</div> <div class="col-md-4a">9-12</div>

</div>

<divclass="row">

<div class="col-md-8a">1-8</div> <div class="col-md-4a">9-12</div>

</div>

</div>

栅格系统最外层区分了四种宽度的浏览器：超小屏(<768px)、小屏

(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为：自动、750px、970px和 1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。

//四种屏幕分类全部激活

<divclass="container"> <div class="row">

<divclass="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12a">4</div> <div class="col-lg-3 col-md-4 col-sm-6col-xs-12 a">4</div> <div class="col-lg-3 col-md-4col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3col-md-4 col-sm-6 col-xs-12 a">4</div> <divclass="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <divclass="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12a">4</div> <div class="col-lg-3 col-md-4 col-sm-6col-xs-12 a">4</div>

<div class="col-lg-3 col-md-4col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3col-md-4 col-sm-6 col-xs-12 a">4</div>

</div>

</div>

//有时我们可以设置列偏移，让中间保持空隙

<divclass="container"> <div class="row">

<divclass="col-md-8 a">8</div>

<div class="col-md-3col-md-offset-1 a">3</div> </div>

</div>

//也可以嵌套，嵌满也是 12 列<divclass="container"> <div class="row">

<divclass="col-md-9 a">

<div class="col-md-8a">1-8</div> <div class="col-md-4a">9-12</div>

</div>

<div class="col-md-3a"> 11-12

</div>

</div>

</div>

//可以把两个列交换位置，push向左移动，pull 向右移动

<divclass="container"> <div class="row">

<div class="col-md-9 col-md-push-3a">9</div> <div class="col-md-3 col-md-pull-9a">3</div>

</div>

</div>