一、基本用法
class="container">
class="row">
class="col-md-4">.col-md-4
class="col-md-8">.col-md-8
class="row">
class="col-md-4">.col-md-4
class="col-md-4">.col-md-4
class="col-md-4">.col-md-4
class="row">
class="col-md-3">.col-md-3
class="col-md-6">.col-md-6
class="col-md-3">.col-md-3
.conatainer>row>col-md-x ,一个row下面x的总和不超过12
二、列偏移
class="container">
列向右移动四列的间距
class="row">
class="col-md-4">.col-md-4
class="col-md-2 col-md-offset-4">列向右移动四列的间距
class="col-md-2">.col-md-2
class="row">
class="col-md-4">.col-md-4
class="col-md-4 col-md-offset-4">列向右移动四列的间距
列偏移和列本身相加不能超过12
三、列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
class="container">
class="row">
class="col-md-3 col-md-push-7">.col-md-4
class="col-md-8 col-md-pull-4">.col-md-8
四、列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。
class="container">
class="row">
class="col-md-8">我的里面嵌套了一个网格
class="row">
class="col-md-6">col-md-6
class="col-md-6">col-md-6
class="col-md-4">col-md-4