Style

Grid

50（+10） 列栅格系统

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
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
2
2
2
2
2
2
2
2
2
2
2
2
2
17
33
10
40
10
15
25
25
25
50

默认的50列、990px宽度的栅格系统。 

<div class="row">
<div class="span10">...</div>
<div class="span15">...</div>
<div class="span25">...</div>
</div>

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

带有偏移量的列

10
25 offset 15
33 offset 17

只需要给偏移列加上 offset*

<div class="row">
  <div class="span10">...</div>
  <div class="span25 offset15">...</div>
</div>
<div class="row show-grid">
  <div class="span33 offset17">33 offset 17</div>
</div>

嵌套列

Level 1 of column
Level 2
Level 2

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

嵌套行中的列横跨宽度相加必须等于其外部列的宽度。 例如：一个 .span25 列中可以有一个 .span10 列和一个 .span15 列。 

<div class="row">
<div class="span25">
Level 1 of column
<div class="row">
<div class="span10">Level 2</div>
<div class="span15">Level 2</div>
</div>
</div>
</div>