0

在使用 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>

另外，根据文档，当我想在流体网格中嵌套列时

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

然后文档继续给出这个例子，其中第一行是一个全角列，第二行有 2 个半角列

<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。有人可以改进这个解释吗？

4

1 回答 1

4

(1) I don't see how this is at all different to a non-fluid grid

  • It uses percentages

(2) the number of nested columns should not match the parent's number of columns

Well, bad example, what they simply mean is that the number in the class names should always add up to 12, regardless of what they are nested in.

This is correct:

<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>

instead of this, which is wrong:

<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>
于 2012-12-03T19:52:24.463 回答