1.6 流式网格系统

流式网格系统的列宽定义使用百分比,而不是像素。流式网格系统与固定网格系统一样都具有响应能力,可适应不同的屏幕和设备。只要把某一行的.row改为.row-fluid,这一行就会成为流式的。不改变列的类,是为了简化固定和流式网格的切换。想平移列?跟固定网格中一样,在要平移的列中添加.offset*类即可:

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

流式网格中的嵌套有点不一样。原因是在使用百分比的情况下,每个.row都会把列数重置为12。举个例子,要想在一个.span8中嵌套两个等宽的列,不能使用两个.span4(尽管两个4平分8),而应该使用两个类为.span6<div>(见图1-4)。这是为保证内容具有响应性,因为我们希望内容100%填满容器:

<div class="row-fluid">
  <div class="span8">
                <div class="row">
                        <div class="span6">...</div>
                        <div class="span6">...</div>
                </div>
  </div>
</div>

enter image description here
图1-4:嵌套的流式网格

目录