间隔

Margin属性 和 padding属性

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

使用CSS网格布局模块?考虑使用 gap实用工具。

标记符号

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

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

属性为：

• m - 用于设置margin
• p - 用于设置 padding

sides属性为

• t - 用于设置 margin-top 或者 padding-top
• b - 用于设置 margin-bottom 或者 padding-bottom
• s - 用于设置 margin-left 或者 padding-left 在LTR里, margin-right 或者 padding-right 在LTR里。
• e - 用于设置 margin-right 或者 padding-right 在LTR里, margin-left 或者 padding-left 在LTR里。
• x - 用于设置 both *-left and *-right
• y - 用于设置 both *-top and *-bottom
• blank - 用于在元素的四边设置 margin 或者 padding

size属性 为:

• 0 - 对于通过设置空白或填充为 0 来消除 margin 或 padding 的类。
• 1 - (默认) 用于为 $spacer * .25 设置 the margin 或者 padding
• 2 - (默认) 用于为 $spacer * .5 设置 margin 或者 padding
• 3 - (默认) 用于为 $spacer 设置 margin 或者 padding
• 4 - (默认) 用于为 $spacer * 1.5 设置 margin 或者 padding
• 5 - (默认) 用于为 $spacer * 3 设置 margin or padding
• auto - 用于为auto设置 margin

(您可以通过向 $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 和 width 的内容)，通过将水平边距设置为 auto。

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

Margin 的负值

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

语法几乎与默认的正边距实用工具相同，只是在请求的大小之前添加了 n 。以下是与 .mt-1 相反的一个示例类:

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

网格工具

当使用 display: grid 时，你可以在父容器上使用 gap 实用工具。这样可以节省向单个网格项目(display: grid 容器的子项目)添加边距实用工具的时间。Gap实用工具默认情况下是响应式的，并根据 $spacers Sass映射通过我们的实用工具API生成。

<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)中的6个大小。没有 .gap-auto 实用工具类，因为它实际上与 .gap-0 相同。