跳到主要內容 跳到文檔導航
Check
in English

間距

Bootstrap 包括各種速記響應邊距、填充和間隙實用程序類,用於修改元素的外觀。

邊距和填充

使用速記類將響應友好的值marginpadding值分配給元素或其側面的子集。包括對單個屬性、所有屬性以及垂直和水平屬性的支持。類是從默認的 Sass 映射構建的,範圍從.25rem3rem.

使用 CSS 網格佈局模塊?考慮改用 gap 實用程序

符號

適用於所有斷點的間距實用程序 from xstoxxl中沒有斷點縮寫。這是因為這些類是自上而下應用的min-width: 0,因此不受媒體查詢的約束。但是,其餘斷點確實包含斷點縮寫。

{property}{sides}-{size}這些類使用forxs{property}{sides}-{breakpoint}-{size}for smmdlgxl和的格式命名xxl

如果財產是以下之一:

  • m- 對於設置的類margin
  • p- 對於設置的類padding

其中是以下之一:

  • t- 對於設置margin-toppadding-top
  • b- 對於設置margin-bottompadding-bottom
  • s- (開始)用於設置margin-leftpadding-leftLTRmargin-rightpadding-rightRTL中的類
  • e-(結束)對於設置margin-rightpadding-right在 LTRmargin-leftpadding-leftRTL中的類
  • x- 對於同時設置*-left*-right
  • y- 對於同時設置*-top*-bottom
  • 空白 - 對於在元素的所有 4 個邊上設置 amargin或的類padding

其中size是以下之一:

  • 0- 對於消除marginpadding通過將其設置為的類0
  • 1- (默認情況下)用於設置marginorpadding的類$spacer * .25
  • 2- (默認情況下)用於設置marginorpadding的類$spacer * .5
  • 3- (默認情況下)用於設置marginorpadding的類$spacer
  • 4- (默認情況下)用於設置marginorpadding的類$spacer * 1.5
  • 5- (默認情況下)用於設置marginorpadding的類$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用於水平居中固定寬度塊級內容的類,即具有display: blockwidth集合的內容,方法是將水平邊距設置為auto.

居中元素
<div class="mx-auto" 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,您可以使用gap父網格容器上的實用程序。這可以節省必須將邊距實用程序添加到單個網格項(display: grid容器的子項)的情況。Gap 實用程序默認是響應式的,並且是通過我們的實用程序 API 生成的,基於$spacersSass 映射。

網格項目 1
網格項目 2
網格項目 3
html
<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地圖中的六種尺寸 ( 0- 5)。沒有.gap-auto實用程序類,因為它實際上與.gap-0.

薩斯

地圖

間距實用程序通過 Sass 映射聲明,然後使用我們的實用程序 API 生成。

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

實用程序 API

間距實用程序在我們的實用程序 API 中聲明scss/_utilities.scss了解如何使用實用程序 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),