为什么引导程序的容器类有填充，而行类有负边距来补偿填充

Question

Bootstrap 的container类在两边都有填充：

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

虽然rowclass 有负margins：

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

所以当我们这样放置 html 时：

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

类中的内容row占用了容器从左到右的所有空间，padding抵消了using negaive margins。我想知道为什么使用这种方法？我也看到它被用于导航栏，特别是navbar-rightclass 有负边距。

Answer 1

将列放入 .row 中会抵消填充，这样您就可以嵌套列。嵌套列对于控制某些（大多数）布局非常重要。由于列已内置填充，因此如果您嵌套它们而不对其进行偏移，则填充将成倍增加，并且列内容不会按您想要的方式排列。看这个例子：

http://www.bootply.com/ZZ4ML0yjSG

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