Skip to main content Skip to docs navigation
View on GitHub

間隔 (Spacing)

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

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

立即上課去

Margin and padding

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

在使用 CSS 網格排版?考慮使用 the gap utility 吧!

符號

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

對於 xs 使用固定格式 {property}{sides}-{size} 命名,對於 smmdlgxlxxl,使用格式 {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
  • 空白 - 同時設定 marginpadding 在元素的四個邊緣

size 設定:

  • 0 - 設定 margin 或是 padding0
  • 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 (05) 六個大小。這裡沒有 .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
    ),