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

Question

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

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

而row 类有否定的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 类中的内容占用了容器从左到右的所有空间，使用否定的margins 抵消了padding。我想知道为什么使用这种方法？我还看到它被用于导航栏，特别是 navbar-right 类有负边距。

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>

Answer 2

.container 具有填充以适应 .row 的负边距，而 .row 具有负边距，因为 col-*（列）工作。由于列使用填充来创建间距（列之间的空间），因此行的负边距消除了填充对最外层列的影响。

没有负边距，外侧会多出 15 px，如您在此处所见。

https://codeply.com/p/1bLNZAjk8D