引导行上的负边距

Question

引导行的

margin

（左和右）为

-15px

。

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

1. .container

   的

   padding

   （左和右）为

   15px

2. col-*

   有

   15px

   的排水沟。

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

margin

（左侧和右侧）右）

-15px

。

我只是想知道，为什么不删除容器的

padding

并将行的填充/边距设置为0？

它会产生相同的效果，第一列到

15px

的距离为

.container

，最后一列也是如此。

我缺少什么？

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

padding

。

Answer 1

这是您简单易懂的答案

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

边距顶部示例

mt-n3

边距底部示例

mb-n2

Answer 2

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

<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

您可以在

Bootstrap 示例

中看到 container

用于网格内容以外的几个示例

负边距也更适合响应式设计。许多人问“为什么不直接调整第一列和最后一列的填充呢？”。这个演示展示了原因

---

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

Answer 3

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

要删除负边距，建议的方法是根据 bootstrap 版本使用 no-gutters 类或 g-0 类。

Upto Bootstrap 版本 4.6 使用

<div class="row no-gutters">

Bootstrap 版本 5.1 以后使用

<div class="row g-0">

Answer 4

引导程序不存在负边距。

您可以添加以下内容来执行此操作：

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

@each $size, $value in $spacers {
  .mt-n#{$size} {
    margin-top: -$value;
  }
  .ms-n#{$size} {
    margin-right: -$value;
  }
  .mb-n#{$size} {
    margin-bottom: -$value;
  }
  .me-n#{$size} {
    margin-left: -$value;
  }
  .mx-n#{$size} {
    margin-left: -$value;
    margin-right: -$value;
  }
  .my-n#{$size} {
    margin-top: -$value;
    margin-bottom: -$value;
  }
}

并像那样使用这个

mt-n1

，

me-n4

，

mx-n3

...

Answer 5

引导行上的负边距非常简单 转到 Bootstrap 类并将 'n' 与边距数字连接起来 例如

mt-2 //should change to mt-n3