引导行上的负边距

Question

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

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

1. .container 具有 --- 的 15px padding （左右）
2. col-* 的排水沟为 15px 。

因此，为了避免第一列（左侧）的排水沟产生的空白空间和最后一列（右侧）的排水沟产生的空间，该行有一个 margin -15px 的（左右）。

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

它将产生相同的效果，第一列将具有 15px .container 距离，最后一列也是如此。

我错过了什么？

我已经检查过： Bootstrap 中 .row 类的负左右边距 和 Bootstrap 的 .row margin-left: -15px - 为什么它超出了（来自文档） 但我看不出有任何理由使用负边距而不是0 padding 。

原文由 Ignasi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的“容器”和“行”？

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果从行中删除负边距，则应该练习删除列填充，因为行减边距是为了处理列中相同数量的填充。

要删除负边距，推荐的方法是根据引导程序的版本使用 no-gutters 类或 g-0 类。

直到 Bootstrap 版本 4.6 使用

<div class="row no-gutters">

Bootstrap 5.1 版以后使用

<div class="row g-0">

原文由 LearningIsNever EndingProcess 发布，翻译遵循 CC BY-SA 4.0 许可协议