,每列分配多列
<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>