Bootstrap 3-为什么行类比其容器宽？

我刚刚开始使用Bootstrap3。我很难理解行类的工作方式。有办法避免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/

在所有网格系统中，每列之间都有沟槽。Bootstrap的系统在每列的左侧和右侧都设置15px的填充以创建此装订线。

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

的 .row DIV应该从来没有真正被用来比格列其他嫌弃。如果是这样，您会看到内容相对于任何列都发生了移动，这在您的小提琴中很明显。

更新：

在我回答之后，您修改了您的问题，所以这是您现在要问的问题的答案：将.container类添加到第一个<div>。请参阅工作示例。

使用bootstrap 3.3.7可以解决此问题，用.container-fluid包裹.row。

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

为什么引导.row的默认左边距为-30px？

您基本上使用“ clearfix”代替“ row”。除负边距外，它与“行”完全相同。

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

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

在引导程序4中添加'mx-auto'类对我来说解决了溢出问题。

您需要div像这样更新第一个Element：

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

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

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

Bootstrap设置行列的填充，因此行的任何内容都不应出现在容器外部。如果您遇到这种情况，并且正在使用col -...类正确使用bootstrap的网格系统，则可能是其他地方的CSS重置了列的填充。