17

我无法理解row-fluid课堂的运作方式。根据文档，它会自行调整以适应流体设计，例如响应式设计。因此，如果它有足够的空间，它就可以放在同一行，否则它会转到下一行。

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

奇怪的是，前三个文章标题适合第一行。第二排和其余部分略微向右推。但是查看 html（如下）没有涉及额外的类来导致这种“副作用”。

在此处输入图像描述

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

4

3 回答 3

17

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

<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。跨度类有左边距。只有最后一个孩子row-fluid没有左边距。

现在再次查看Twitter Bootstrap 文档中的示例。"对于简单的两列布局，创建一个 .row 并添加适当数量的 .span 列。由于这是一个 12 列的网格，每个 .span 跨越这 12 列中的许多列，并且应该始终加起来 12每行（或父项中的列数）。 ”

于 2013-04-23T01:44:48.927 回答
4

这里发生了几件事。请记住，默认情况下，fluid-row 中跨度的总大小应加起来为 12。这里还有很多，所以当 css 将 span4 的宽度定义为大约 33% 时，它们实际上超过了 100% ，所以他们要换一条新路线。但是它们并没有被清除，所以你最终会看到它们在页面上循环并制作列。

您在第二行左侧有空间的原因是引导程序定义了“排水沟”以给列一些边距。由于使用了过多的列，您会看到它们。有特定的 css 可以将行的第一个跨度上的装订线减少到 0，因此为什么第一个跨度上没有空间。

随后的“行”只有两列，因为附加排水沟的存在会影响数学运算并使三个 span4 加起来超过 100% 的宽度，从而导致它们换行。

于 2013-04-22T23:09:30.753 回答
0

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

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span4"></div> 
    </div>
    <div class="row-fluid">
      <div class="span4"></div>
    </div>
</div>
于 2013-04-23T16:40:53.803 回答