Twitter-bootstrap：如何正确使用行流体类？

Question

我在理解row-fluid类的工作原理时遇到了问题。根据{{​​3}}，它适应流体设计，如响应式设计。因此，如果它有足够的空间，它使它适合在同一行，否则它将进入下一行。

但是请看这个例子：documentation

奇怪的是前三个文章标题适合第一行。 第二排和第二排略微向右推。但是看一下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个.Scope类留有余量。只有一个row-fluid中的最后一个孩子没有左边距。

现在再看一下Twitter Bootstrap documentation上的例子。 “对于一个简单的两列布局，创建一个.row并添加适当数量的.span列。由于这是一个12列网格，每个.span跨越这12列中的一些，应该总是加起来每行12个（或父级中的列数）。“

Answer 2

这里有几件事情要发生。请记住，默认情况下，流体行中跨度的总大小应该总计为12.这里有相当多的内容，因此当css将span4的宽度定义为大约33％时，它们实际上超过了100％ ，所以他们要换一个新的路线。但是它们并没有清除，所以你最终会绕着它们循环并在页面上创建列。

你有第二行左边空格的原因是bootstrap定义了'gutters＆＃39;为列提供一些余量。由于使用了多余的列，您可以看到它们。有一个特定的css可以将第一行的排水沟减少到0，这就是为什么第一行没有空间的原因。

随后的＆＃39;行＆＃39;只有两列，因为额外的排水沟的存在抛出了数学并使三个span4s加起来超过100％宽度，导致它们包裹。

Answer 3

以下代码将在容器之后工作（用于响应式布局）：

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