twitter bootstrap 中的 row-fluid vs row

Posted 2023-03-06

【中文标题】twitter bootstrap 中的 row-fluid vs row

【英文标题】：row-fluid vs row in twitter bootstrap

【发布时间】：2014-10-30 05:25:08

【问题描述】：

我有一个container-fluid 容器元素，并且一直使用row 而不是row-fluid，诚然出于无知。 现在我正试图用row-fluid 类替换row 类，但遇到了一些问题。 首先，我查看了.less 中的row-fluid 宽度是如何定义的，它对我来说完全是象形文字，所以有人愿意解释一下吗？

更重要的是，当我将 row 替换为 row-fluid 时，元素的高度会折叠为 0，这需要我包含 .clearfix 类，以便 row-fluid 元素增长到包含其子列。为什么这是必要的，即浮动的内容以及为什么当我将 row 替换为 row-fluid 时？

【问题讨论】：

Bootstrap v3's .row = Bootstrap v2's .row-fluid

【参考方案1】：

这取决于你想知道哪些元素的宽度。 row-fluid 类本身的宽度为 100%。跨度（或列）具有相对宽度，设置为组合为 100。

在浮动时：所有列都会浮动，这就是使其流畅的原因。 row-fluid 所做的唯一与高度相关的事情是设置 min-height: 30px。从定义上讲，这使得任何东西都会塌陷到 0 的高度变得很奇怪。

我怀疑您在旧网格上所做的样式是导致您的主要问题的原因。

【讨论】：

使用 row-fluid 似乎很奇怪，因为我刚刚检查了 .css 文件，即使布局正常工作，它也没有定义，所以我猜它只是将 row-fluid 解释为行还是什么？无论如何，感谢您的输入，由于行流体不存在，我的问题得到了解决。谢谢！

@Derek 那么你说的是 Bootstrap 3 吗？如果是这种情况，请将问题重新标记为twitter-bootstrap-3。

我在这里有点新。但由于问题的核心在于 BS3 中不存在 row-fluid，我还应该重新标记吗？

【参考方案2】：

这是 twitter bootstrap 所说的：

为了正确对齐和填充，行必须放在 .container（固定宽度）或 .container-fluid（全宽）内。

嗯，这是关于container 而不是rows，但如果这个解释对你来说还不够，那么this is 简短的解释应该会让你明白。

注意：如果它的版本 2，那么 row-fluid 本身就是 float: left，这需要按照你说的清除。

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

希望这会有所帮助:)

【讨论】：

Bootstrap 3 没有 row-fluid 类，所以我怀疑他在询问 Bootstrap 2。

@gpgekko 是的，它适用于第 2 版，但我在第 3 版的文档中找到了对 clearfix 事物的解释，所以我也将其链接到了答案中：)

【参考方案3】：

Bootstrap 2.x 到 3.0 的类更改 Bootstrap 2.x-->.row-fluid 和 Bootstrap 3.0 -->.row