Twitter bootstrap 引导程序3-为什么行类比其容器宽？

我刚开始使用Bootstrap3。我的日子不好过 了解row类的工作方式。 有没有办法避免

左填充

和

右填充

<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>

上校
上校
上校
上校

---

在所有网格系统中，每个柱之间都有排水沟。Bootstrap的系统在每列的左侧和右侧设置一个15px的填充，以创建此边沟

问题是第一列的左侧不应有半个檐槽，最后一列的右侧不应有半个檐槽。它们不像某些网格系统那样对这些列使用某种

.first

或

.last

类，而是将

.row

类设置为与列的填充匹配的负边距。这“拉”了第一列和最后一列的排水沟，同时使其更宽

.row

div实际上不应用于保存网格列以外的任何内容。如果是，您将看到内容相对于任何列发生了移动，这在您的小提琴中很明显

更新：

---

在我回答之后，您修改了您的问题，因此下面是您现在所问问题的答案：将

.container

类添加到第一个

。参见。

参见下面我对类似帖子的回复

---

您基本上使用“clearfix”而不是“row”。它与“row”完全相同，不包括负边距。

我在container类中使用了row类，但仍然存在一些问题。当我添加

左边距时：自动；右边距：自动

到

.row

类，它工作正常。

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

---

引导设置行列的填充，因此行的任何内容都不应出现在容器外部。如果您正在经历这种情况，并且正在正确使用bootstrap的网格系统，请使用col-。。。类，很可能在某个地方有额外的CSS重置列上的填充。

使用bootstrap 3.3.7，使用.container流体包装.row可以解决此问题。

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

在bootstrap 4中添加'mx auto'类修复了的溢出问题 我

您需要更新第一个

div

元素，如下所示：

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

无需对所有嵌套行执行此操作（如果有）。
只需将

mx auto

添加到最外层的

行

（或多行），以避免垂直滚动条。

---

不要通过添加一个“row”类来替换边距来覆盖所有引导行的行为。

网格列由填充分隔，而不是边距（在BS3中）太好了！这就解释了所有溢出的内容。这些类做了两件不同的事情，尽管它们看起来似乎在视觉上做到了。Clear在响应情况和网格系统中没有那么灵活。row的行为是正确的。这解决了包装外的溢出内容。但更好的方法是用container.BEST ASWER包装行！起来@漂泊这仍然是真的吗？我不确定你的意思是它们不能正常工作，因为我一直在使用它们，而且它们似乎工作正常。@co谷：不再是了。这是在v3.0.2中，因为引导行的左右边距为-15px。这可能不是您的问题，但对于其他具有相同问题类型的人来说：确保您的div上只有一个class属性。我不小心把它们折叠起来了，得到了同样的问题。或者，你有一个旧版本的引导。例如，与VS2015一起发布的3.0.0。看，这对我来说是有效的，尽管起初我认为不是，那是因为我打开了开发人员的web控制台，这减少了宽度，但显然也把事情搞砸了。这里还建议使用

.container fluid

：当包装div处于

绝对位置时也有效。谢谢你的提示，如果我能多次投票给你这个答案……：）Bootstrap 4的修复方法相同。这就像一个符咒！在Bootstrap4中添加'MXAuto'类修复了溢出问题。