栅格系统的使用其实就是栅格的列的不同组合方式.
列的组合
上代码:
<div class='container'>
<div class='row'>
<div class='col-md-1'>1</div>
.......省略10个跟上面一样的div
<div class='col-md-1'>12</div>
</div>
<div class='row'>
<div class='col-md-8'>1</div>
<div class='col-md-4'>2</div>
</div>
<div class='row'>
<div class='col-md-6'>1</div>
<div class='col-md-6'>2</div>
</div>
</div>
上面的代码总共有三行,第一行有12列,第二行有两列,第三行有两列,但是第二行和第三行的列宽度是不一样的.列偏移
有时候我们不想让两块内容连在一起,这时候可以用栅格系统的偏移来实现.在bootstrap中定义一系列的col-md-offset-*形式的样式来实现偏移效果.
上代码:
<div class='container'>
<div class='row'>
<div class='col-md-4'>第一列</div>
<div class='col-md-4 col-md-offset-4'>第二列</div>
</div>
</div>
上面的代码只有两列,第一列靠最左边,第二列在行的最右面,中间相差4个栅格.
实际上col-md-offset-4是通过margin-left来实现的
例如: col-md-offset-4的源码是这样的
.col-md-offset-4{margin-left:33.333333333333333%;}列嵌套
栅格系统也支持列嵌套,也就是在一个列里面再添加一个row.
上代码:
<div class='container'>
<div class='row'>
<div class='col-md-9'>
这是第一列
<div class='row'>
<div class='col-md-6'>第一列里面嵌套的行的第一列</div>
<div class='col-md-6'>第一列里面嵌套的行的第二列</div>
</div>
</div>
<div class='col-md-3'>第二列</div>
</div>
</div>
需要知道在列里面嵌套的行也是按照栅格系统分成12列的,只是每一列与外面的列宽度不一样,这是因为栅格系统每一列的宽度是根据百分比来指定的.
