css - Twitter-bootstrap:如何正确使用 row-fluid 类？

Question

我无法理解 row-fluid 类的工作原理。根据documentation它会自行调整以适应流畅的设计，例如响应式设计。因此，如果它有足够的空间，它就会放在同一行，否则它会转到下一行。

但是在这里看这个例子:https://duelify.com/

奇怪的是，前三个文章标题放在第一行。 第二排和其余部分稍微向右推。但是查看 html(下方)，没有涉及其他类来导致这种“副作用”。

为什么文章标题不在一行中。为什么两者之间会有这种随机差距？有没有办法让它们看起来有序且中间没有任何间隙？

Answer 1

在你的情况下，正确的代码会像

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

etc...

在每个 row-fluid 类中，span 类的最大总和必须达到 12。Span 类有左边距。只有一个 row-fluid 中的最后一个 child 没有左边距。

现在再看看 Twitter Bootstrap documentation 上的例子. "对于简单的两列布局，创建一个 .row 并添加适当数量的 .span 列。因为这是一个 12 列的网格，每个 .span 跨越这 12 列中的一些列，并且应该始终加起来每行 12 个(或父级中的列数)。"