Source

間距

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

這個怎麼運作

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

符號

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

{property}{sides}-{size}這些類使用forxs和{property}{sides}-{breakpoint}-{size}for sm、md、lg和的格式命名xl。

如果財產是以下之一：

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

其中邊是以下之一：

t- 對於設置margin-top或padding-top
b- 對於設置margin-bottom或padding-bottom
l- 對於設置margin-left或padding-left
r- 對於設置margin-right或padding-right
x- 對於同時設置*-left和*-right
y- 對於同時設置*-top和*-bottom
空白 - 對於在元素的所有 4 側設置 amargin或的類padding

其中size是以下之一：

0- 對於消除margin或padding通過將其設置為的類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: block和width集合的內容，方法是將水平邊距設置為auto.

居中元素

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

負邊距

在 CSS 中，margin屬性可以使用負值（padding不能）。1從 4.2 開始，我們為上面列出的每個非零整數大小（例如，、、、、、）添加了負邊距實用2程序。這些實用程序非常適合跨斷點自定義網格列裝訂線。345

語法與默認的正邊距實用程序幾乎相同，但n在請求的大小之前添加了。這是一個與以下相反的示例類.mt-1：

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

md這是在中 ( ) 斷點及以上處自定義 Bootstrap 網格的示例。我們增加了.colpadding ，.px-md-5然後.mx-md-n5在 parent 上抵消了它.row。

自定義列填充

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>