在 GitHub 上查看

间距

Bootstrap 包含各种响应式快捷边距和填充实用工具类，用于修改元素的外观。

工作原理

使用快捷类为元素或其部分边分配响应式友好型 margin 或 padding 值。包括对单个属性、所有属性以及垂直和水平属性的支持。这些类基于一个默认 Sass 映射构建，范围从 .25rem 到 3rem。

符号

适用于所有断点（从 xs 到 xl）的间距实用工具类中没有断点缩写。这是因为这些类从 min-width: 0 开始应用，因此不受媒体查询的约束。然而，其余断点确实包含断点缩写。

这些类使用以下格式命名：{property}{sides}-{size}（用于 xs）和 {property}{sides}-{breakpoint}-{size}（用于 sm、md、lg 和 xl）。

其中 property 为以下之一：

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

其中 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 的类
空白 - 用于在元素的所有 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;
}

.ml-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;">
  Centered element
</div>

负边距

在 CSS 中，margin 属性可以使用负值（padding 不行）。从 4.2 开始，我们为上面列出的每个非零整数大小（例如，1、2、3、4、5）添加了负边距实用工具。这些实用工具非常适合在断点处自定义网格列间距。

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

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

以下是如何在中号 (md) 断点及以上自定义 Bootstrap 网格的示例。我们使用 .px-md-5 增加 .col 填充，然后在父 .row 上使用 .mx-md-n5 来抵消它。

自定义列填充

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>