Bootstrap里包括了大部分的响应式margin类、padding类和间隙实用工具 类来修改元素的外观。

Margin属性 和 padding属性

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

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

标记符号

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

对于 xs,类的命名格式为 {property}{sides}-{size},对于 sm, md, lg, xlxxl, 类的命名格式为 {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 来消除 marginpadding 的类。
  • 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: blockwidth 的内容),通过将水平边距设置为 auto

Centered element
<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生成。

Grid item 1
Grid item 2
Grid item 3
<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 映射(05)中的6个大小。没有 .gap-auto 实用工具类,因为它实际上与 .gap-0 相同。