外边距

概览

使用边距工具类来控制元素周围的外部空间。边距工具类是基于默认的 Sass map构建的，范围从 0 到 3rem（.m-0 到 .m-12）。使用像 .m-3 和 .m-5 这样的工具类来控制元素所有边的边距：

          <div class="m-3">.m-3</div>
<div class="m-5">.m-5</div>
        

符号

适用于所有断点的边距工具类，从xs到2xl，不包含断点前缀。这是因为这些类从min-width: 0开始应用，因此不受媒体查询限制。然而，其余的断点则包含断点前缀。

这些类使用以下格式命名：{property}{sides}-{size}表示xs，{breakpoint}:{property}{sides}-{size}表示sm、md、lg、xl和2xl。

其中 property 是：

• m - 用于设置 margin 的类

其中 sides 为以下之一：

• t - 适用于设置了 margin-top 的类
• b - 适用于设置了 margin-bottom 的类
• s - （开始）适用于在 LTR 中设置 margin-left、在 RTL 中设置 margin-right 的类
• e - （结束）适用于在 LTR 中设置 margin-right、在 RTL 中设置 margin-left 的类
• x - 适用于同时设置 *-left 和 *-right 的类
• y - 适用于同时设置 *-top 和 *-bottom 的类
• 空白 - 适用于在元素的四面都设置 margin 的类

其中 size 为以下之一：

• 0 - 对于消除…的课程 margin 通过将其设置为 0
• 1 -（默认情况下）用于设置该类的 margin 到 $spacer * .25
• 2 -（默认情况下）用于设置该类的 margin 到 $spacer * .375
• 3 -（默认情况下）用于设置该类的 margin 到 $spacer * .5
• 4 -（默认情况下）用于设置该类的 margin 到 $spacer * .75
• 5 -（默认情况下）用于设置该类的 margin 到 $spacer * 1
• 6 -（默认情况下）用于设置该类的 margin 到 $spacer * 1.25
• 7 -（默认情况下）用于设置该类的 margin 到 $spacer * 1.5
• 8 -（默认情况下）用于设置该类的 margin 到 $spacer * 1.75
• 9 -（默认情况下）用于设置该类的 margin 到 $spacer * 2
• 10 -（默认情况下）用于设置该类的 margin 到 $spacer * 2.25
• 11 -（默认情况下）用于设置该类的 margin 到 $spacer * 2.5
• 12 -（默认情况下）用于设置该类的 margin 到 $spacer * 3
• auto - 对于设置了的类 margin 自动

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

示例

单面

使用像 .mt-3、.me-2、.mb-4 和 .ms-1 这样的工具来控制元素一侧的外边距：

          <div class="mt-4">.mt-4</div>
<div class="me-4">.me-4</div>
<div class="mb-4">.mb-4</div>
<div class="ms-4">.ms-4</div>
        

水平边距

使用像 .mx-3 和 .mx-5 这样的工具来控制元素的水平边距：

          <div class="mx-3">.mx-3</div>
<div class="mx-5">.mx-5</div>
        

垂直边距

使用像 .my-3 和 .my-5 这样的工具来控制元素的垂直边距：

          <div class="my-3">.my-3</div>
<div class="my-5">.my-5</div>
        

水平居中

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

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

负边距

在 CSS 中，margin 属性可以使用负值（padding 不能）。在 v6 中，负边距仅限于 margin-inline-start 和 margin-inline-end，使用间距符 -1（-0.25rem）和 -2（-0.5rem）：

          <div class="ms--1">.ms--1</div>
<div class="me--2">.me--2</div>
        

v5 的全方位负边距工具类（如 .mt-n1）已被移除。

响应式

所有的边距工具类都是响应式的，并包含所有的断点。

• .m-0 到 .m-12 和 .m-auto
• .sm:m-0 到 .sm:m-12 和 .sm:m-auto
• .md:m-0 到 .md:m-12 和 .md:m-auto
• .lg:m-0 到 .lg:m-12 和 .lg:m-auto
• .xl:m-0 到 .xl:m-12 和 .xl:m-auto
• .2xl:m-0 到 .2xl:m-12 和 .2xl:m-auto

CSS

Sass 工具 API

边距工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map.merge($spacers, (auto: auto))
),
"margin-x": (
  responsive: true,
  property: margin-inline,
  class: mx,
  values: map.merge($spacers, (auto: auto))
),
"margin-y": (
  responsive: true,
  property: margin-block,
  class: my,
  values: map.merge($spacers, (auto: auto))
),
"margin-top": (
  responsive: true,
  property: margin-block-start,
  class: mt,
  values: map.merge($spacers, (auto: auto))
),
"margin-end": (
  responsive: true,
  property: margin-inline-end,
  class: me,
  values: map-merge-multiple($spacers, $negative-spacers, (auto: auto))
),
"margin-bottom": (
  responsive: true,
  property: margin-block-end,
  class: mb,
  values: map.merge($spacers, (auto: auto))
),
"margin-start": (
  responsive: true,
  property: margin-inline-start,
  class: ms,
  values: map-merge-multiple($spacers, $negative-spacers, (auto: auto))
),