这样的效果还是达到了两行两列的。当然你也可以通过响应式工具，这个会在以后进行详细说明，这里暂时不进行示例演示了。
列偏移
这个其实很简单就是通过一个样式类，通过
.col-md-offset-*可以将列偏移到右侧。这些class通过使用
*选择器将所有列增加了列的左侧margin。例如，
.col-md-offset-4将
.col-md-4向右移动了4个列的宽度。复制代码
<div class=”page-header”>
<h1>案例:列偏移</h1>
</div>
<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
通过阅读上面的代码大概可以想象出它的排版布局了吧。
为了使用内置的栅格进行内容的嵌套，通过添加一个新的.row和一系列的.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套列所包含的列加起来应该等于12。
复制代码
<div class=”page-header”>
<h1>案例:列嵌套</h1>
</div>
<div class=”row”>
<div class=”col-md-9″>
Level 1: .col-md-9
<div class=”row”>
<div class=”col-md-6″>
Level 2: .col-md-6
</div>
<div class=”col-md-6″>
Level 2: .col-md-6
</div>
</div>
<div class=”row”>
<div class=”col-md-3″>
Level 3: .col-md-3
</div>
<div class=”col-md-6″>
Level 3: .col-md-6
</div>
</div>
</div>
</div>
通过上面的代码可以发现，首先定义了一个row,然后在此row中添加了一个.col-md-9的列，代表这个元素占有9列。
然后在这个占有9列的元素里面添加了两个不同的row。
即第一个row:将第一个row分成了两份，每份占有的6列，这12列，但是其总宽度和它外面的占有9列的元素的宽度是一样的。
第二个row:将第二个row分成了两份，第一份占有3列，第二份占有6列，然后剩余的3列没有进行填充。
