Bootstrap 3 - 为什么行类比它的容器宽？答案

【问题标题】：Bootstrap 3 - Why is row class is wider than its container?Bootstrap 3 - 为什么行类比它的容器宽？
【发布时间】：2013-09-28 22:16:08
【问题描述】：

我刚开始使用 Bootstrap 3。我遇到了困难了解行类是如何工作的。有没有办法避免padding-left 和padding-right？

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

【问题讨论】：

@Adrift 这仍然是真的吗？我不确定你的意思是不是它们不能正常工作，因为我一直在使用它们，它们似乎可以正常工作。
@Cereal：不再。这是 v3.0.2 中的 added
因为引导行的左右边距为 -15px。
可能不是您的问题，而是其他有相同类型问题的人：确保您的 div 上只有一个类属性。我不小心将它们加倍并遇到了同样的问题。

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在所有网格系统中，每列之间都有排水沟。 Bootstrap 的系统在每列的左右两边都设置了 15px 的 padding 来创建这个 gutter。

问题是第一列不应该在左边有半个装订线，最后一列不应该在右边有半个装订线。他们没有像某些网格系统那样在这些列上使用某种.first 或.last 类，而是将.row 类设置为具有与列的填充匹配的负边距。这会“拉开”第一列和最后一列的排水沟，同时使其更宽。

.row div 不应该真正用于保存除网格列之外的任何内容。如果是这样，您将看到内容相对于任何列发生了变化，正如您的小提琴中所显而易见的那样。

更新：

您在我回答后修改了您的问题，所以这里是您现在提出的问题的答案：将.container 类添加到第一个<div>。见working example。

【讨论】：

网格列由填充分隔，而不是边距（在 BS3 中）
太棒了！这就解释了所有溢出的内容。

【解决方案2】：

请参阅下面我对类似帖子的回复。

Why does the bootstrap .row has a default margin-left of -30px?

您基本上使用“clearfix”而不是“row”。除了负边距之外，它与“行”完全相同。

【讨论】：

这些类做了两件不同的事情，尽管它们看起来似乎在做这件事。Clear 在响应式情况下没有那么灵活，而对于网格系统，.row 的行为是正确的。
这解决了包装器外的溢出内容。
但更好的方法是用容器包装行。
最佳答案！起来！

【解决方案3】：

我在容器类中使用了行类，但仍然有一些问题。当我将margin-left: auto; margin-right: auto; 添加到.row 类时，它工作正常。

【讨论】：

这就像一个魅力！在 bootstrap 4 中添加“mx-auto”类为我解决了溢出问题。

【解决方案4】：

对于调试此问题的任何未来开发人员：

Bootstrap 设置行列的填充，因此行的任何内容都不应出现在容器之外。如果您遇到这种情况并且使用 col-... 类正确使用引导程序的网格系统，则很可能您在某处有其他 CSS 重置列上的填充。

【讨论】：

或者，您有旧版本的 Bootstrap。例如 3.0.0 随 VS2015 分发。见github.com/twbs/bootstrap/issues/8959

【解决方案5】：

使用 bootstrap 3.3.7 解决了这个问题，用 .container-fluid 包裹 .row。

【讨论】：

这对我有用，尽管最初我认为它没有，那是因为我打开了开发人员的 Web 控制台，这减小了宽度，但显然也搞砸了。这里也建议使用.container-fluid：stackoverflow.com/a/23616447/5272567
也可以在包装 div 的位置为 absolute 时工作。谢谢提示
如果我可以多次投票给这个答案... :)
Bootstrap 4 的相同修复。

【解决方案6】：

@Michelle M. 应该获得此答案的全部功劳。
她在其中一条评论中说：

在 bootstrap 4 中添加 'mx-auto' 类修复了我。

您需要像这样更新您的第一个 div 元素：

<div class="row mx-auto" style="background:#000000">

无需对所有嵌套行执行此操作（如果有的话）。
只需将mx-auto 添加到最外层的row（或行）即可避免垂直滚动条。
不要通过添加“行”类来替换边距来覆盖所有引导行的行为。

【讨论】：