Bootstrap栅格系统的使用详解(4)

只需要给需要偏移的列元素上添加类名col-md-offset-*(星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如:在列元素中添加.col-md-offset-6 类将 .col-md-6元素向右侧偏移了6个列(column)的宽度。

<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

2.5列嵌套

 Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(.row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(.row),宽度为100%时,就是当前外部列的宽度。

<div class="row">
 <div class="col-sm-9">
 Level 1: .col-sm-9
 <div class="row">
  <div class="col-xs-8 col-sm-6">
  Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
  Level 2: .col-xs-4 .col-sm-6
  </div>
 </div>
 </div>
</div>

2.6列排序

 列排序其实就是改变列的方向(顺序),就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1232.html