1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
4
4
4
4
4
4
8
8
8
8
16
12
12
24

默认的24列、1190px宽度的栅格系统。

<div class="row">
  <div class="span8">...</div>
  <div class="span16">...</div>
</div>

页面被我们分割成24个基础列,你通过指定横跨多少列来控制每个区域的宽度。


带有偏移量的列

8
8 offset 8
6 offset 6
6 offset 6
16 offset 8
<div class="row">
  <div class="span8">...</div>
  <div class="span8 offset8">...</div>
</div>

嵌套列

有时我们需要在某一列中嵌套一个栅格,只需要在 .span* 中增加一个 .row , 并在 .row 中增加若干 .span*

样例

嵌套行中的列横跨宽度相加必须等于其外部列的宽度。 例如:一个 .span12 列中可以有两个 .span6 列。

Level 1 of column
Level 2
Level 2
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>