Bootstrap 包括各种速记响应边距、填充和间隙实用程序类，用于修改元素的外观。

Margin 和 Padding

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

使用 CSS 网格布局模块？考虑使用 gap 实用程序。

符号

适用于所有断点（从 xs 到 xxl）的间距实用程序中没有断点缩写。这是因为这些类是从 min-width: 0 及以上应用的，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。

这些类的命名格式为 {property}{sides}-{size}（用于 xs）和 {property}{sides}-{breakpoint}-{size}（用于 sm、md、lg、xl 和 xxl）。

其中 property 是以下之一：

• m - 对于设置 margin 的类
• p - 用于设置 padding 的类

其中 sides 是以下之一：

• t - 用于设置 margin-top 或 padding-top 的类
• b - 对于设置 margin-bottom 或 padding-bottom 的类
• s - （start）用于在 LTR 中设置 margin-left 或 padding-left，在 RTL 中设置 margin-right 或 padding-right 的类
• e - (end) 用于在 LTR 中设置 margin-right 或 padding-right ，在 RTL 中设置 margin-left 或 padding-left 的类
• x - 对于同时设置 *-left 和 *-right 的类
• y - 对于同时设置 *-top 和 *-bottom 的类
• 空白 - 用于在元素的所有 4 个边上设置 margin 或 padding 的类

其中 size 是以下之一：

• 0 - 对于通过将其设置为 0 来消除边距或填充的类
• 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 设置为 auto 的类

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

例子

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

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

.ms-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;">
  中心元素
</div>

负边距

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

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

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

差距

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

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">网格项 1</div>
  <div class="p-2 bg-light border">网格项 2</div>
  <div class="p-2 bg-light border">网格项 3</div>
</div>

支持包括所有 Bootstrap 网格断点的响应选项，以及 $spacers 映射 (0-5) 中的六种尺寸。没有 .gap-auto 实用程序类，因为它实际上与 .gap-0 相同。