间距

间距实用程序用于使用速记类为元素或其子集分配响应友好的边距或填充值。它包括单个属性、所有属性以及垂直和水平属性。

它类是根据从 .25rem 到 3rem 的默认 Sass 映射构建的。

符号表示

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

这些类的命名格式为 {property}{sides}-{size} (对于 xs) 和 {property}{sides}-{breakpoint}-{size} (对于 sm、md、lg 和 xl)。

在这里，“property”是以下之一

• m - 用于设置边距的类
• p - 用于设置填充的类

"sides"是以下之一

• t - 用于设置 margin-top 或 padding-top 的类。
• b - 用于设置 margin-bottom 或 padding-bottom 的类。
• l - 用于设置 margin-left 或 padding-left 的类。
• r - 用于设置 margin-right 或 padding-right 的类。
• x - 用于设置 *-left 和 *-right 的类。
• y - 用于设置 *-top 和 *-bottom 的类。
• blank - 用于设置元素所有 4 个边上的边距或填充的类。

"size"是以下之一

• 0 - 用于通过将其设置为 0 来消除边距或填充的类
• 1 - (默认) 用于将边距或填充设置为 $spacer-x * .25 或 $spacer-y * .25 的类
• 2 - (默认) 用于将边距或填充设置为 $spacer-x * .5 或 $spacer-y * .5 的类
• 3 - (默认) 用于将边距或填充设置为 $spacer-x 或 $spacer-y 的类
• 4 - (默认) 用于将边距或填充设置为 $spacer-x * 1.5 或 $spacer-y * 1.5 的类
• 5 - (默认) 用于将边距或填充设置为 $spacer-x * 3 或 $spacer-y * 3 的类

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

示例

让我们举个例子来看看这些类的用法

水平居中

Bootstrap 还支持.mx-auto 类，用于水平居中固定宽度的块级内容。具有 display: block 和已设置宽度的内容？通过将水平边距设置为 auto。