引导行上的负边距答案

【问题标题】：Bootstrap negative margin on rows引导行上的负边距
【发布时间】：2018-12-19 08:15:15
【问题描述】：

引导行具有-15px 的margin（左和右）。

据我所知，这主要有两个原因：

.container 有一个padding（左和右）15px
col-* 的排水沟为15px。

因此，为了避免第一列（左侧）的装订线创建的空白空间和最后一列（右侧）的装订线创建的空间，该行有一个margin（ -15px 的左右）。

我只是想知道，为什么不删除容器的padding 并将行的填充/边距设置为0？

会产生同样的效果，第一列与.container的距离为15px，最后一列也一样。

我错过了什么？

我检查了：Negative left and right margin of .row class in Bootstrap 和 Bootstrap's .row margin-left: -15px - why is it outdented (from the docs)，但我看不出有任何理由使用负边距而不是 0 padding。

【问题讨论】：

如果您尝试将行和列嵌套在多个级别上，您的测试用例是否仍然有效......？
我同意这是一个非常严格的设计。它迫使您使用整个脚手架层次结构，即使您只需要该行。不知道他们为什么这样做。某些组件可能需要正常工作/看起来不错。从这个意义上说，Bootstrap 非常死板和冗长
@CBroe 如果您尊重层次结构：列始终是行的直接子行我不明白为什么会失败。
也许helloerik.com/… 可以帮助您更清楚地了解为什么有必要这样做。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

这是因为容器旨在用于包含任何内容，而不仅仅是网格行和列。如果容器上没有填充，内容会被强制靠在布局的边缘，并且不会与其他内容对齐...

<div class="container px-0">
  <p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
  <div class="row m-0">
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
         grid content
      </div>
  </div>
</div>

https://codeply.com/go/23PqWB19ol

您可以看到container 用于除网格内容之外的几个示例Bootstrap examples

负边距也更适合响应式设计。许多人问“为什么不只调整第一列和最后一列的填充？”。这个demo shows why

【讨论】：

那么，也就是说，必须用容器包裹一行？如果没有，Row 组件会溢出到相邻的 div/whatever 中

【解决方案2】：

这里是您的简单答案

转到您想要给出负边距的班级并使用此方法。

上边距示例

mt-n3

边距底部示例

mb-n2

【讨论】：

【解决方案3】：

在行上引导负边距非常容易 转到您的 Bootstrap 类并使用边距编号连接“n” 例如

mt-2 //should change to mt-n3

【讨论】：