CSS Twitter-bootstrap：如何正确使用 row-fluid 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16158176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter-bootstrap: How to use row-fluid class properly?
提问by Houman
I have a problem understanding how row-fluidclass works. According to the documentationit adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.
我在理解row-fluid类的工作方式时遇到问题。根据文档，它会根据流体设计（例如响应式设计）进行自我调整。因此，如果它有足够的空间，它会使其适合同一行，否则它会转到下一行。
However looking at this example here : https://duelify.com/
但是在这里看这个例子：https: //duelify.com/
Strangely enough the first three article headers fit on first row. Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this 'side effect'.
奇怪的是，前三个文章标题都放在第一行。第二排和其余部分略微向右推。但是查看 html（下面）没有涉及其他类来导致这种“副作用”。
Why aren't the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?
为什么文章标题不适合在一行中。为什么中间会出现这种随机间隙？有没有办法让它们看起来有序而中间没有任何间隙？
采纳答案by Miljan Puzovi?
In your case, proper code will be like
在您的情况下，正确的代码将类似于
<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...
In every row-fluidclass maximum sum of spanclasses must be up to 12. Span classes have left margin. Only last child in one row-fluiddon't have left margin.
每个row-fluid班级的最大班级总和span必须达到 12。跨班级有左边距。只有最后一个孩子row-fluid没有左边距。
Look again now at examples on Twitter Bootstrap documentation. "For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent)."
现在再次查看Twitter Bootstrap 文档中的示例。"对于简单的两列布局，创建一个 .row 并添加适当数量的 .span 列。由于这是一个 12 列的网格，每个 .span 跨越这 12 列中的许多列，并且应始终加起来为 12每行（或父级中的列数）。”
回答by PCasagrande
There are a couple of things going on here. Remember, by default, the total size of the spans in a fluid-row should add up to 12. There is quite a bit more here, so when the css defines the width of a span4 as approximately 33% they are actually exceeding 100%, so they are going to a new line. But they are not clearing, so you end up with them looping around and making columns like on the page.
这里有几件事情正在发生。请记住，默认情况下，流体行中跨度的总大小应加起来为 12。这里还有很多，所以当 css 将 span4 的宽度定义为大约 33% 时，它们实际上超过了 100% ，所以他们要去一个新的行。但是它们并没有清除，因此您最终会在它们周围循环并像在页面上一样制作列。
The reason you have the space to the left of what would be the second row is that bootstrap defines 'gutters' to give the columns some margin. Because of the excess columns being used you see them. There is specific css to reduce the gutter on the first span of a row to 0, hence why there is no space on the first one.
您在第二行左侧留出空间的原因是引导程序定义了“装订线”来为列提供一些边距。由于使用了过多的列，您会看到它们。有特定的 css 可以将行的第一个跨度上的装订线减少到 0，因此为什么第一个上没有空间。
The subsequent 'rows' have only two columns because the presence of the additional gutter throws off the math and makes the three span4s add up to more than 100% width, causing them to wrap.
随后的“行”只有两列，因为额外的装订线的存在会影响数学计算，并使三个 span4s 加起来超过 100% 的宽度，导致它们换行。
回答by Ebrahim Khalil
The following code will work after container (for Responsive layout):
以下代码将在容器之后工作（对于响应式布局）：
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
</div>
</div>
