网格系统:
1)列组合
通过改变数字进行合并列
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div>
2)列偏移
不希望两个列紧邻在一起,可以使用列偏移(添加类名col-md-offset-)
col-md-*与col-md-offset-*的*+*不能大于12,否则会出现列断行
3)列排序
改变列的方向,就是改变右浮动,设置浮动距离
添加类名“col-md-pushh-*”and”col=md-pull-*”
即左边的列到右边,右边的列到左边
例如:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
</div
如果要变成4在右边,8在左边可以使用如下代码:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>
</div>
</div>
效果如图:
即col-md-4向右移(push)8个单位,col-md(pull)-8向左移4个单位
4)列嵌套
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
注意:嵌套内的列也要不超过12列