Question

使用Bootstrap的流体网格时，如果希望内容跨越行的整个宽度，是否需要声明列。换句话说，这是否足够

<div class="row-fluid">
  This column should span the full width of the row
</div>

或者是否真的有必要这样做（正如文档建议的那样）：

<div class="row-fluid">
  <div class="span12">This column should span the full width of the row</div>
</div>

此外，根据docs

，当我想在流体网格中嵌套列时

使用流体网格嵌套与[非流体网格]略有不同：嵌套列的数量不应与父列的数量相匹配。相反，每个级别的嵌套列都会重置，因为每行占用父列的100％。

然后，文档继续给出这个示例，其中第一行是一个全宽列，第二行有两个半宽列

<div class="row-fluid">
  <div class="span12">Fluid 12
    <div class="row-fluid">
      <div class="span6">Fluid 6</div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

除了行的类名之外，我看不出这与非流体网格有什么不同。此外，这个例子似乎与声明

相矛盾

嵌套列的数量不应与父列的数量匹配

因为上次我检查了6 + 6 = 12.有人可以改进这个解释吗？

Answer 1

（1）我不知道这与非流体网格有什么不同

使用百分比

（2）嵌套列的数量不应与父列的数量相匹配

嗯，糟糕的例子，它们的简单含义是类名中的数字应该总是加起来12，无论它们嵌套在什么位置。

这是正确的：

<div class="row-fluid">
  <div class="span6 row-fluid">
     <div class="span4"> &nbsp; </div>
     <div class="span4"> &nbsp; </div>
     <div class="span4"> &nbsp; </div>
  </div>
</div>

而不是这个，这是错误的：

<div class="row-fluid">
  <div class="span6 row-fluid">
     <div class="span2"> &nbsp; </div>
     <div class="span2"> &nbsp; </div>
     <div class="span2"> &nbsp; </div>
  </div>
</div>

twitter bootstrap流体网格列

1 个答案: