在行上引导负边距

Question

引导程序行的margin（左侧和右侧）为-15px。

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

1. 该.container有一个padding（左，右）15px
2. 该col-*有一个排水沟15px。

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

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

它将产生相同的效果，第一列15px到的距离.container与最后一列的距离相同。

我想念的是什么？

我已经检查过：Bootstrap和Bootstrap的.row margin-left 中.row类的左右边距为负：-15px-为什么超出（从文档中得出），但我看不出有任何理由使用负边距代替0 padding。

Answer 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 示例的示例

负边距也适用于响应式设计。很多人问“为什么不调整第一列和最后一列的填充？”。这个演示说明了为什么

相关：如果您的内容要跨越整个宽度，您是否需要使用 Bootstrap 的“容器”和“行”？

Answer 2

这是您简单易行的答案

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

边距顶部示例

mt-n3

边距底部示例

mb-n2