間距

Bootstrap 包含廣泛的簡寫式回應式外框距、內距和間隙公用程式類別，用於修改元素的外觀。

在此頁面上

外框距和內距

使用簡寫式類別，將回應式友善的 margin 或 padding 值指定給元素或其部分側邊。包含對個別屬性、所有屬性以及垂直和水平屬性的支援。類別建構自預設 Sass 映射，範圍從 .25rem 到 3rem。

使用 CSS Grid 排版模組？請考慮使用間距工具程式。

符號

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

這些類別使用格式 {property}{sides}-{size}（適用於 xs）和 {property}{sides}-{breakpoint}-{size}（適用於 sm、md、lg、xl 和 xxl）命名。

其中 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 或 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 設為自動的類別

（您可以在 $spacers Sass 地圖變數中新增項目，以新增更多尺寸。）

範例

以下是一些這些類別的具體範例

.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 類別，用於水平置中固定寬度的區塊層級內容，也就是說，設定水平外距為 auto 的內容具有 display: block 和 width。

置中的元素

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

負外距

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

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

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

間距

使用 display: grid 或 display: flex 時，您可以在父元素上使用 gap 工具程式。這可以省去在網格或彈性容器的個別子元素中新增邊界工具程式的麻煩。預設情況下，間距工具程式具有回應能力，並根據 $spacers Sass 地圖透過我們的工具程式 API 產生。

網格項目 1

網格項目 2

網格項目 3

網格項目 4

html

<div class="grid gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

支援包括 Bootstrap 的所有網格斷點的回應選項，以及 $spacers 地圖中的六個大小（0–5）。沒有 .gap-auto 工具程式類別，因為它實際上與 .gap-0 相同。

row-gap

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

網格項目 1

網格項目 2

網格項目 3

網格項目 4

html

<div class="grid gap-0 row-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

column-gap

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

網格項目 1

網格項目 2

網格項目 3

網格項目 4

html

<div class="grid gap-0 column-gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

CSS

Sass 地圖

間距工具程式透過 Sass 地圖宣告，然後使用我們的工具程式 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 工具程式 API

間距工具程式在 scss/_utilities.scss 中的工具程式 API 中宣告。了解如何使用工具程式 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
),