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

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像素，你可以在这里看到..

http://www.bootply.com/vIykdqVZcd

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

2 个答案: