Twitter Bootstrap中的row-fluid和row有什么区别？

Question

Twitter Bootstrap中的row-fluid和row有什么区别？

javascriptcsstwitter-bootstraptwitter-bootstrap-3

14

我有一个container-fluid容器元素，一直在使用row而不是row-fluid，这可能是因为我的无知。

现在我正在尝试用row-fluid替换row类，但遇到了一些问题。首先，我查看了如何在.less中定义row-fluid宽度，但对我来说完全是象形文字，所以有人能解释一下吗？

更重要的是，当我用row-fluid替换行时，元素的高度会折叠为0，导致我必须包含.clearfix类，以使row-fluid元素增长以包含其子列。为什么需要这样做？也就是说，在我用row-fluid替换row时，正在浮动什么，以及为什么需要这样做？

- Derek

2

Bootstrap v3的.row等同于Bootstrap v2的.row-fluid。 - cvrebert

3个回答

3

这是Twitter Bootstrap的说法：

行必须放置在.container（固定宽度）或.container-fluid（全宽）中，以进行适当的对齐和填充。

嗯，这是关于container而不是rows，但如果这个解释对你不够清楚，那么this is短解释应该会让事情更清楚。

注意：如果是版本2，则row-fluid本身正在使用float:left，这需要像你所说的那样被清除。

这是因为Fluid grids的嵌套使用方式不同：每个嵌套级别的列应加起来等于12列。这是因为流体网格使用百分比而不是像素来设置宽度。

希望这可以帮到你 :)

- Rishabh Shah

2

Bootstrap 3 没有 row-fluid 类，所以我猜他在问 Bootstrap 2。 - gpgekko

1

@gpgekko 是的，这是针对版本2的，但我在版本3的文档中找到了“clearfix”问题的解释，所以我也在答案中提供了链接 :) - Rishabh Shah

2

Bootstrap 2.x到3.0类更改 Bootstrap 2.x-->.row-fluid，而Bootstrap 3.0 -->.row

- Indranil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gpgekko · Accepted Answer

取决于您想知道哪些元素的宽度。

row-fluid 类本身的宽度为100％。跨度（或列）具有相对宽度，以这种方式设置，使其组合为100。
在浮动方面：所有列都被浮动，这就是使其流体的原因。与 row-fluid 相关的唯一高度问题是设置 min-height：30px 。这使得任何东西坍塌到0的高度定义上很奇怪。
我怀疑您对旧网格进行的样式设计是导致主要问题的原因。