間距（Spacing）
Bootstrap包括各種簡寫響應式margin、padding和間隔的通用類別，用來修改一個元素的外觀。
邊距和填充
賦予一個縮寫class使margin或padding值在一個元素上或其中一個邊緣上（包含響應式）。包含支持單一個邊緣屬性或全部邊緣、垂直邊緣、水平邊緣。Class來自于Sass map，范圍從.25rem到3rem。
在使用CSS網格排版？考慮使用 the gap utility吧！
符號
如果是適用于所有從xs到xxl斷點的間隔通用類別，就不需加入斷點縮寫。因為從min-width: 0以上開始都將應用這些類別，因此不受media query的約束。但若是針對其余斷點，就需要包含斷點縮寫。
對于xs使用固定格式{property}{sides}-{size}命名，對于sm、md、lg、xl和xxl，使用格式{property}{sides}-{breakpoint}-{size}命名。
property設定：
m- 設定marginp- 設定padding
sides設定：
t- 設定margin-top或是padding-topb- 設定margin-bottom或是padding-bottoms- 在LTR設定margin-left或是padding-left，RTL設定margin-right或是padding-righte- 在LTR設定margin-right or padding-right，RTL設定margin-left或是padding-leftx- 同時設定*-left和*-righty- 同時設定*-top和*-bottom- blank - 空白-同時設定margin或padding在元素的四個邊緣
size設定：
0- 設定margin或是padding為01- （預設）設定margin或是padding為$spacer * .252- （預設）設定margin或是padding為$spacer * .53-（預設）設定margin或是padding為$spacer4- （預設）設定margin或是padding為$spacer * 1.55- （預設）設定margin或是padding為$spacer * 3auto- 設定margin為auto
（您也可以透過將項目增加到$spacers Sass map變數以新增更多尺寸。）
示例
以下是這些類的一些代表性示例：
.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: block、本身設有width的內容），是透過將水平margin設置為auto達成。
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
負邊距
在CSS中，margin屬性可以使用負值（padding不能）。這些負值的margin在默認情況下是禁用的，但可以通過在Sass中設置$enable-negative-margins: true以啟用。
語法與預設的、正值margin通用類別幾乎相同，在所需的大小前加入n，以下為與.mt-1相反的示例：/p>
.mt-n1 {
margin-top: -0.25rem !important;
}
間隙
使用display: grid時，您可以在父層的grid容器加上gap通用類別。這可以省去在單個網格線（display: grid容器的子項）上使用margin通用類別。Gap通用類別預設具有響應式，并且根據$spacers Sass map通用類別API產生。
<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 map（0–5）六個大小。這里沒有.gap-auto通用類別，因為它實際上與.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
),