间距

概览

使用间距工具类来控制 flexbox 和网格布局中子元素之间的间距。间距工具类是基于默认的 Sass map构建的，范围从0到3rem（.gap-0到.gap-12）。使用像.gap-3和.gap-5这样的工具类来控制所有子元素之间的间距：

          <div class="d-flex gap-3">...</div>
<div class="d-flex gap-5">...</div>
        

符号

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

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

其中 property 为以下之一：

• gap - 用于设置 gap 的类
• row-gap - 用于设置 row-gap 的类
• column-gap - 用于设置 column-gap 的类

其中 size 为以下之一：

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

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

示例

Flexbox 间距

使用 gap 工具来控制 flexbox 容器中子元素之间的间距：

          <div class="d-flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
        

网格间隙

间距工具也适用于 CSS 网格布局：

          <div class="d-grid gap-3" style="grid-template-columns: 1fr 1fr;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
        

行和列间隙

使用 row-gap 和 column-gap 工具可独立控制行与列之间的间距：

          <div class="d-grid row-gap-4 column-gap-2" style="grid-template-columns: 1fr 1fr 1fr;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>
        

带换行的弹性盒子

你也可以在换行的 flexbox 布局中使用 row-gap 和 column-gap 工具类：

          <div class="d-flex flex-wrap row-gap-3 column-gap-2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
        

响应式

所有的间隙工具都是响应式的，并包含所有断点。

• .gap-0 到 .gap-12
• .sm:gap-0 到 .sm:gap-12
• .md:gap-0 到 .md:gap-12
• .lg:gap-0 到 .lg:gap-12
• .xl:gap-0 到 .xl:gap-12
• .2xl:gap-0 到 .2xl:gap-12

• .row-gap-0 到 .row-gap-12
• .sm:row-gap-0 到 .sm:row-gap-12
• .md:row-gap-0 到 .md:row-gap-12
• .lg:row-gap-0 到 .lg:row-gap-12
• .xl:row-gap-0 到 .xl:row-gap-12
• .2xl:row-gap-0 到 .2xl:row-gap-12

• .column-gap-0 到 .column-gap-12
• .sm:column-gap-0 到 .sm:column-gap-12
• .md:column-gap-0 到 .md:column-gap-12
• .lg:column-gap-0 到 .lg:column-gap-12
• .xl:column-gap-0 到 .xl:column-gap-12
• .2xl:column-gap-0 到 .2xl:column-gap-12

CSS

Sass 工具 API

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

"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),