View on GitHub

間隔 (Spacing)

Bootstrap 包括各種簡寫響應式 margin、padding 和間隔的通用類別，用來修改一個元素的外觀。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

Margin and padding

賦予一個縮寫 class 使 margin 或 padding 值在一個元素上或其中一個邊緣上 (包含響應式)。包含支援單一個邊緣屬性或全部邊緣、垂直邊緣、水平邊緣。Class 來自於 Sass map，範圍從 .25rem 到 3rem。

在使用 CSS 網格排版？考慮使用 the gap utility 吧！

符號

如果是適用於所有從 xs 到 xxl 斷點的間隔通用類別，就不需加入中斷點縮寫。因為從 min-width: 0 以上開始都將應用這些類別，因此不受 media query 的約束。但若是針對其餘斷點，就需要包含中斷點縮寫。

對於 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 - 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right
e - 在 LTR 設定 margin-right or 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 變數以新增更多尺寸。)

範例

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

.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: block 、本身設有 width 的內容)，是透過將水平 margin 設置為 auto 達成。

Centered element

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

負的 margin

在 CSS 中， margin 屬性可以使用負值（padding 不能）。這些負值的 margin 在默認情況下是禁用的，但可以通過在 Sass 中設置 $enable-negative-margins: true 以啟用。

語法與預設的、正值 margin 通用類別幾乎相同，在所需的大小前加入 n，以下為與 .mt-1 相反的範例：

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

Gap

使用 display: grid 時，您可以在父層的 grid 容器加上 gap 通用類別。這可以省去在單個網格線（display: grid 容器的子項）上使用 margin 通用類別。Gap 通用類別預設具有響應式，並且根據 $spacers Sass map 通用類別 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 map (0–5) 六個大小。這裡沒有 .gap-auto 通用類別，因為它實際上與 .gap-0 相同。

Sass

Maps

Spacing 通用類別通過 Sass map 宣告，然後使用我們的生成。

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

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

    "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
    ),