Source

間距

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

這個怎麼運作

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

符號

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

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

如果財產是以下之一:

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

其中是以下之一:

  • t- 對於設置margin-toppadding-top
  • b- 對於設置margin-bottompadding-bottom
  • l- 對於設置margin-leftpadding-left
  • r- 對於設置margin-rightpadding-right
  • 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;
}

.ml-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>