間距（Spacing）
Bootstrap包括各種簡寫響應(yīng)式margin、padding和間隔的通用類別，用來修改一個(gè)元素的外觀。
邊距和填充
賦予一個(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的約束。但若是針對(duì)其余斷點(diǎn)，就需要包含斷點(diǎn)縮寫。
對(duì)于xs使用固定格式{property}{sides}-{size}命名，對(duì)于sm、md、lg、xl和xxl，使用格式{property}{sides}-{breakpoint}-{size}命名。
property設(shè)定：
m- 設(shè)定marginp- 設(shè)定padding
sides設(shè)定：
t- 設(shè)定margin-top或是padding-topb- 設(shè)定margin-bottom或是padding-bottoms- 在LTR設(shè)定margin-left或是padding-left，RTL設(shè)定margin-right或是padding-righte- 在LTR設(shè)定margin-right or padding-right，RTL設(shè)定margin-left或是padding-leftx- 同時(shí)設(shè)定*-left和*-righty- 同時(shí)設(shè)定*-top和*-bottom- blank - 空白-同時(shí)設(shè)定margin或padding在元素的四個(gè)邊緣
size設(shè)定：
0- 設(shè)定margin或是padding為01- （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * .252- （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * .53-（預(yù)設(shè)）設(shè)定margin或是padding為$spacer4- （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * 1.55- （預(yù)設(shè)）設(shè)定margin或是padding為$spacer * 3auto- 設(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á)成。
<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)生。
<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
),