Bootstrap - 为啥：行删除左边距而不是行流体

Posted 2023-03-06

【中文标题】Bootstrap - 为啥：行删除左边距而不是行流体

【英文标题】：Bootstrap - Why: Row remove margin-left & not Row-fluidBootstrap - 为什么：行删除左边距而不是行流体

【发布时间】：2013-03-18 14:43:27

【问题描述】：

行： margin-left: -20px;

Row-fluid ：与margin-left无关。

为什么 row-fluid 没有通过某个 % 删除这个 margin-left ？

编辑：.row-fluid > .span 正在添加margin-left。

【问题讨论】：

Row-fluid 没有属性 margin-left: -20px 因为它使用 %.好的 - 但是，如果您不希望在您的后续跨度中使用那些 -20px 怎么办？

我必须在任何地方使用 'fuild'，我无法更改 @gridGutterWidth。但我需要在我的一个页面上摆脱它。有什么想法吗？

【参考方案1】：

您可以在此处找到有关 Bootstrap 流畅方面的更多信息：http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

这是因为<span> 封装在.row 中的标签有一个margin-left: 20px。负左边距是为了解决这个问题，以便该行正确显示。使用.row-fluid > span 关系，该封装内的span 标签没有左边距，因此不需要在.row-fluid 内更正

【讨论】：

关于文档示例，您所说的似乎是错误的。

我查看了他们提供的代码和 CSS 示例，对我来说似乎就是这种情况。看看 bootstrap 中的 CSS，关于 .row 和 .row-fluid 以及它们各自的子跨度。

接下来的问题是：为什么在 span 上的 margin-left 20px 开始需要反作用？为什么不直接从 span 中删除 20px 的边距，而不是在行上留下 -20px 的边距来抵消它？

【参考方案2】：

这很难解释，你的答案是粗体，其余的是上下文。

静态布局的逻辑是什么？

span 元素具有 margin-left: 20px 以与其他 spans 保持分离。

row 元素具有margin-left: -20px，以确保第一个span - 或任何位于“左列”的span - 位于container 的开头。

因为静态row 没有设置它的width，所以margin-left: -20px 不会减去元素的宽度，从而继续填充其祖先。

流畅的布局会发生什么？

我们可以尝试同样的逻辑，但不同的是span元素的width和margin-left是用百分比定义的，所以如果我们增加row元素的实际宽度（通过应用负数margin)，这些span 元素也会增加其大小，因此它们不适合container。

因此，流畅的布局使用不同的技术来实现类似的结果，只需将margin-left: 0 应用于:first-child。

深入挖掘

为什么不在两种布局中使用相同的策略呢？当然，这将简化实现，但静态技术（不适用于流体）更强大。这是因为任何落在“左列”中的元素，无论是否为:first-child，都将成为“边距更正”。静态布局需要这种行为来舒适地提供响应能力，没有它，流体布局可以或多或少地管理。