間距（Spacing）

Bootstrap 包含各種簡寫的響應式 margin、padding 和 gap 通用類別，用於修改元素的外觀。

本頁內容

Margin 與 Padding（Margin and padding）

使用簡寫類別為元素或其部分邊設定響應式友好的 margin 或 padding 值。支援單一屬性、全部屬性、垂直和水平屬性。類別是從預設的 Sass map 建構的，範圍從 .25rem 到 3rem。

使用 CSS Grid 版面配置模組？ 請考慮改用 gap 工具程式。

命名規則（Notation）

適用於所有中斷點（從 xs 到 xxl）的間距工具程式不包含中斷點縮寫。這是因為這些類別從 min-width: 0 開始套用，因此不受媒體查詢限制。然而，其餘的中斷點確實包含中斷點縮寫。

類別的命名格式為 xs 使用 {property}{sides}-{size}，而 sm、md、lg、xl 和 xxl 使用 {property}{sides}-{breakpoint}-{size}。

其中 property 是以下之一：

m - 用於設定 margin 的類別
p - 用於設定 padding 的類別

其中 sides 是以下之一：

t - 用於設定 margin-top 或 padding-top 的類別
b - 用於設定 margin-bottom 或 padding-bottom 的類別
s - (start) 用於在 LTR 中設定 margin-left 或 padding-left，在 RTL 中設定 margin-right 或 padding-right 的類別
e - (end) 用於在 LTR 中設定 margin-right 或 padding-right，在 RTL 中設定 margin-left 或 padding-left 的類別
x - 用於同時設定 *-left 和 *-right 的類別
y - 用於同時設定 *-top 和 *-bottom 的類別
空白 - 用於在元素四個邊都設定 margin 或 padding 的類別

其中 size 是以下之一：

0 - 用於將 margin 或 padding 設為 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 的類別
auto - 用於將 margin 設為 auto 的類別

（您可以透過在 $spacers Sass map 變數中新增項目來加入更多尺寸。）

範例（Examples）

以下是這些類別的一些代表性範例：

.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;
}

水平置中（Horizontal centering）

此外，Bootstrap 還包含一個 .mx-auto 類別，用於水平置中具有固定寬度的區塊級別內容——也就是具有 display: block 和設定 width 的內容——透過將水平 margin 設為 auto。

Centered element

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

負 margin（Negative margin）

在 CSS 中，margin 屬性可以使用負值（padding 不行）。這些負 margin 預設是停用的，但可以在 Sass 中透過設定 $enable-negative-margins: true 來啟用。

語法與預設的正 margin 工具程式幾乎相同，但在請求的尺寸前加上 n。以下是與 .mt-1 相反的類別範例：

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

Gap

當使用 display: grid 或 display: flex 時，您可以在父元素上使用 gap 工具程式。這可以省去為 grid 或 flex 容器的各個子元素新增 margin 工具程式的需要。Gap 工具程式預設是響應式的，並透過我們的 utilities API 根據 $spacers Sass map 產生。

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

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

支援包括所有 Bootstrap 格線中斷點的響應式選項，以及來自 $spacers map 的六種尺寸（0–5）。沒有 .gap-auto 通用類別，因為它實際上與 .gap-0 相同。

row-gap

row-gap 設定指定容器中子項目之間的垂直間距。

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

column-gap

column-gap 設定指定容器中子項目之間的水平間距。

Grid item 1

Grid item 2

Grid item 3

Grid item 4

html

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

CSS

Sass maps

間距工具程式透過 Sass map 宣告，然後使用我們的 utilities API 產生。

scss/_variables.scss

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Sass utilities API

間距通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

scss/_utilities.scss

"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($spacers, (auto: auto))
),
"margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($spacers, (auto: auto))
),
"margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($spacers, (auto: auto))
),
"margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($spacers, (auto: auto))
),
"margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($spacers, (auto: auto))
),
"margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $negative-spacers
),
"negative-margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $negative-spacers
),
"negative-margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $negative-spacers
),
"negative-margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $negative-spacers
),
"negative-margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $negative-spacers
),
"negative-margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $negative-spacers
),
"negative-margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $negative-spacers
),
// Padding utilities
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),
"padding-x": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers
),
// Gap utility
"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
),