间距（Spacing）

Bootstrap 包括各种很容易记住的响应margin边距、padding填充和gap间隙实用程序类来修改元素的外观。

它是如何工作的

使用速记类将响应友好的margin或padding值分配给元素或其边的子集。包括对单个属性、所有属性以及垂直和水平属性的支持。类是从默认的 Sass 映射构建的，范围从 .25rem 到 3rem。

注释

适用于所有断点的间距工具，从xs到xxl，其中没有断点缩写。这是因为这些类从min-width: 0以上开始应用，因此不受媒体查询的约束。然而，其余的断点则包括一个断点缩写。

类的命名格式为：xs为{属性}{边长}-{大小}，sm、md、lg、xl和xxl为{属性}{边长}-{断点}-{大小}。

属性是以下之一：

m - margin
p - padding

其中sides(边)是以下之一：

t - margin-top 或 padding-top
b - margin-bottom 或 padding-bottom
l - margin-left 或 padding-left
r - margin-right 或 padding-right
x - both *-left 和 *-right
y - both *-top 和 *-bottom

空白（blank） - 对于在元素的所有4个边上设置 margin 或 padding 的类

其中 size 是以下之一：

0 - 对于那些通过设置为 0 来消除 margin 或 padding。
1 - 对于将 margin 或 padding 设置为 $spacer * .25（默认）。
2 - 对于将 margin 或 padding 设置为 $spacer * .5 （默认）。
3 - 对于将 margin 或 padding 设置为 $spacer （默认）。
4 - 对于将 margin 或 padding 设置为 $spacer * 1.5 （默认）。
5 - 对于将 margin 或 padding 设置为 $spacer * 3 （默认）。
auto - 将margin设置为自动

（您可以通过向 $spacers Sass 映射变量添加条目来添加更多大小。）

示例

以下是这些类的一些代表性示例：

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

水平居中

此外，Bootstrap 还包含一个 .mx-auto 类，用于通过将水平边距设置为 auto 来水平居中固定宽度的块级内容（即设置了 display: block 和 width 的内容） .

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

在线运行

负边距（Negative margin）

在 CSS 中，margin 属性可以使用负值（padding 不能）。这些负边距默认是禁用的，但可以通过设置 $enable-negative-margins: true 在 Sass 中启用。

语法与默认的正边距实用程序几乎相同，但在请求的大小之前添加了 n。这是一个与.mt-1相反的示例类：

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gap（间隙）

使用 display: grid 时，您可以在父网格容器上使用 gap 实用程序。这可以节省必须向单个网格项（display: grid 容器的子项）添加边距实用程序的情况。 Gap 实用程序默认是响应式的，并且是通过我们的实用程序 API 生成的，基于 $spacers Sass 映射。

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>