Twitter bootstrap 为什么要引导&x27；s容器类具有填充，而行类具有负边距以补偿填充

Bootstrap的

容器

类的两侧都有填充物：

.container-fixed(@gutter: @grid-gutter-width) {
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

而

行

类具有负的

边距

：

.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
}

因此，当我们这样放置html时：

<div class="container">
  <div class="row">
    ...
  </div>
</div>

...

---

行

类中的内容占用容器从左到右的所有空间，并使用negaive

边距

偏移

填充

。我想知道为什么使用这种方法？我还看到它被用于导航栏，特别是

navbar right

类具有负边距。

容器

具有填充以容纳
.row
的负边距，
.row
具有负边距，因为
col-*
（列）工作。因为列使用填充来创建边沟（列之间的空间），所以行的负边距消除了填充对最外层列的影响

如果没有负边距，你可以在这里看到，外侧会有额外的15像素

将列放在.row中会偏移填充，这样就可以嵌套列。嵌套列对于控制某些（大多数）布局很重要。由于列内置了填充，如果嵌套它们而不进行偏移，则填充将成倍增加，列内容也不会像您所希望的那样排列。请参见此示例：



不带行缓冲区
第1栏
不带.row缓冲区的嵌套列1
不带.row缓冲区的嵌套列2

带行缓冲区
第1栏
带.row缓冲区的嵌套列1
带.row缓冲区的嵌套列2
这与填充无关-它们彼此相等并相互偏移。不知道为什么要用。是的，对，相互抵消。我重新措辞了。然而问题是他们为什么这么做？也可能是重复的，这篇文章解释了更多，谢谢！让我看一下，也许我会考虑结束这个问题。谢谢。但是如果我设置
padding:0
到
容器
比一切都好。我想前面提到的Dan解释了这一点-容器上的填充和行上的负边距是实现列内行嵌套所必需的。如果在您的示例中，我将
12宽
替换为
8宽，右侧包含双槽
我可以看到双槽右边的排水沟。
<div class="container">
  <h3>Without .row buffer</h3>
  <div class="col-md-12 bg-warning">Column 1
    <div class="col-md-12 bg-danger">
      <div class="col-md-6 bg-info">Nested column 1 without .row buffer</div>
      <div class="col-md-6 bg-success">Nested column 2 without .row buffer</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>With .row buffer</h3>
  <div class="row">
    <div class="col-md-12 bg-warning">Column 1
      <div class="row">
      <div class="col-md-12 bg-danger">
        <div class="row">
          <div class="col-md-6 bg-info">Nested column 1 with .row buffer</div>
          <div class="col-md-6 bg-success">Nested column 2 with .row buffer</div>
        </div>
      </div>
  </div>
</div>