间距(Spacing)

边距和填充

使用速记类为元素或其边的子集指定友好margin 或 padding 值。包括对单个属性、所有属性以及垂直和水平属性的支持。类是从 .25rem to 3rem的默认Sass映射构建的。

使用CSS网格布局模块？考虑使用间隙工具.

符号

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

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

其中属性是以下之一：

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

其中边 是以下之一：

• t - 对于设置 margin-top 或 padding-top的类
• b - 对于设置 margin-bottom 或 padding-bottom的类
• s - 对于设置 margin-left 或 padding-left的类（在 LTR）, margin-right 或 padding-right的类（在 RTL）
• e - 对于设置 margin-right 或 padding-right的类（在 LTR）, margin-left 或 padding-left的类（在 RTL）
• x - 对于设置 *-left 和 *-right的类
• y - 对于设置 *-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 设置为 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 类，用于水平居中固定宽度的块级内容，即具有display: block 和通过将水平边距设置为auto而设置的width的内容。

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

负边距

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

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

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

间隙

使用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>

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