Javascript 推特引导程序中的行流体与行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25682804/
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
row-fluid vs row in twitter bootstrap
提问by Derek
I have a container-fluidcontainer element, and have been using rowas opposed to row-fluid, admittedly out of ignorance.
Now I am trying to replace the rowclass with row-fluidclass, but have run into some questions.
First, I looked at how the row-fluidwidth is defined in the .less, and it's completely hieroglyphic to me, so would anyone care to explain?
我有一个container-fluid容器元素，并且一直在使用row而不是row-fluid，诚然出于无知。
现在我试图row用row-fluidclass替换class，但遇到了一些问题。
首先，我查看row-fluid了 .less 中的宽度是如何定义的，这对我来说完全是象形文字，所以有人愿意解释吗？
More importantly, when I replace row with row-fluid, the height of the element collapses to 0 requiring me to include the .clearfix class in order for the row-fluid element to grow to contain its children columns. Why is this necessary, i.e. what is being floated and why when I replace rowwith row-fluid?
更重要的是，当我用 替换 row 时row-fluid，元素的高度折叠为 0，需要我包含 .clearfix 类，以便 row-fluid 元素增长以包含其子列。为什么这是必要的，即什么是浮动的，为什么当我替换row为row-fluid？
采纳答案by gpgekko
It depends on what elements you want to know the width of. The row-fluidclass itself has a width of 100%. The spans (or columns) have a relative width, set up in such a way that it combines to 100.
这取决于您想知道哪些元素的宽度。所述row-fluid类本身具有的宽度100%。跨度（或列）具有相对宽度，其设置方式使其合并为 100。
On the floating: all columns get floated, this is what makes it fluid. The only height related thing that a row-fluiddoes is setting min-height: 30px. This makes it by definition strange that anything would collapse to a height of 0.
在浮动上：所有列都浮动，这就是使其流动的原因。a 唯一与高度相关的事情row-fluid是设置min-height: 30px。这使得根据定义奇怪的是，任何东西都会坍塌到 0 的高度。
I'd suspect the styling you've done on top of your old grid is what causes your main problems.
我怀疑您在旧网格上所做的样式是导致您的主要问题的原因。
回答by Rishabh Shah
This is what twitter bootstrap says:
这是 twitter bootstrap 所说的：
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。
Well, that is about containernot rows, but if that explanation is not enough for you, then this isthe short explanation which should make things clear for you.
好吧，那是关于containernot rows，但如果那个解释对你来说还不够，那么 这是一个简短的解释，它应该让你清楚。
NOTE:If its version 2, then row-fluiditself is being float: leftwhich would need to be cleared as you say.
注意：如果它的版本是 2，那么row-fluid它本身float: left就需要按照您说的进行清除。
This is because Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
这是因为流体网格以不同的方式使用嵌套：每个嵌套级别的列应加起来最多 12 列。这是因为流体网格使用百分比而不是像素来设置宽度。
Hope this helps :)
希望这可以帮助 ：）
回答by Indranil
Bootstrap 2.x to 3.0 class changeBootstrap 2.x-->.row-fluidand Bootstrap 3.0 -->.row
Bootstrap 2.x 到 3.0 类更改Bootstrap 2.x--> .row-fluid和 Bootstrap 3.0 --> .row
