间距

工作原理

使用简短类为元素或其部分侧面分配响应式边距或内边距值。包括对单个属性、所有属性以及垂直和水平属性的支持。类由默认 Sass 映射构建，范围从 .25rem 到 3rem。

符号

适用于从 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 的类
• 空白 - 用于在元素的四面设置 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 的类（默认）

（你可以通过向 Sass 映射变量 $spacers 添加条目来添加更多尺寸。）

示例

以下是这些类的几个代表性示例

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

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

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

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

水平居中

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

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

<!-- horizontal-centering.vue -->