間距（Spacing）

Bootstrap包括各種簡寫響應(yīng)式margin、padding和間隔的通用類別，用來修改一個(gè)元素的外觀。

On this page

邊距和填充

賦予一個(gè)縮寫class使margin或padding值在一個(gè)元素上或其中一個(gè)邊緣上（包含響應(yīng)式）。包含支持單一個(gè)邊緣屬性或全部邊緣、垂直邊緣、水平邊緣。Class來自于Sass map，范圍從.25rem到3rem。

在使用CSS網(wǎng)格排版？考慮使用 the gap utility吧！

符號(hào)

如果是適用于所有從xs到xxl斷點(diǎn)的間隔通用類別，就不需加入斷點(diǎn)縮寫。因?yàn)閺膍in-width: 0以上開始都將應(yīng)用這些類別，因此不受media query的約束。但若是針對其余斷點(diǎn)，就需要包含斷點(diǎn)縮寫。

對于xs使用固定格式{property}{sides}-{size}命名，對于sm、md、lg、xl和xxl，使用格式{property}{sides}-{breakpoint}-{size}命名。

property設(shè)定：

m - 設(shè)定margin
p - 設(shè)定padding

sides設(shè)定：

t - 設(shè)定margin-top或是padding-top
b - 設(shè)定margin-bottom或是padding-bottom
s - 在LTR設(shè)定margin-left或是padding-left，RTL設(shè)定margin-right或是padding-right
e - 在LTR設(shè)定margin-right or padding-right，RTL設(shè)定margin-left或是padding-left
x - 同時(shí)設(shè)定*-left和*-right
y - 同時(shí)設(shè)定*-top和*-bottom
blank - 空白-同時(shí)設(shè)定margin或padding在元素的四個(gè)邊緣

size設(shè)定：

0 - 設(shè)定margin或是padding為0
1 - （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * .25
2 - （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * .5
3 -（預(yù)設(shè)）設(shè)定margin或是padding為$spacer
4 - （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * 1.5
5 - （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * 3
auto - 設(shè)定margin為auto

（您也可以透過將項(xiàng)目增加到$spacers Sass map變數(shù)以新增更多尺寸。）

示例

以下是這些類的一些代表性示例：

.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還包括一個(gè).mx-auto類別，用于將固定寬度的塊級(jí)內(nèi)容水平置中（也就是具有display: block、本身設(shè)有width的內(nèi)容），是透過將水平margin設(shè)置為auto達(dá)成。

Centered element

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

負(fù)邊距

在CSS中，margin屬性可以使用負(fù)值（padding不能）。這些負(fù)值的margin在默認(rèn)情況下是禁用的，但可以通過在Sass中設(shè)置$enable-negative-margins: true以啟用。

語法與預(yù)設(shè)的、正值margin通用類別幾乎相同，在所需的大小前加入n，以下為與.mt-1相反的示例：/p>

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

間隙

使用display: grid時(shí)，您可以在父層的grid容器加上gap通用類別。這可以省去在單個(gè)網(wǎng)格線（display: grid容器的子項(xiàng)）上使用margin通用類別。Gap通用類別預(yù)設(shè)具有響應(yīng)式，并且根據(jù)$spacers Sass map通用類別API產(chǎn)生。

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的網(wǎng)格斷點(diǎn)中的響應(yīng)選項(xiàng)，以及來自$spacers map（0–5）六個(gè)大小。這里沒有.gap-auto通用類別，因?yàn)樗鼘?shí)際上與.gap-0相同。

Sass

Maps

Spacing utilities are declared via Sass map and then generated with our utilities API.

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

Spacing utilities are declared in our utilities API in 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
),