间距（Spacing）

Bootstrap包括各种简写响应式margin、padding和间隔的通用类别，用来修改一个元素的外观。

On this page

边距和填充

赋予一个缩写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 - 设定margin
p - 设定padding

sides设定：

t - 设定margin-top或是padding-top
b - 设定margin-bottom或是padding-bottom
s - 在LTR设定margin-left或是padding-left，RTL设定margin-right或是padding-right
e - 在LTR设定margin-right or padding-right，RTL设定margin-left或是padding-left
x - 同时设定*-left和*-right
y - 同时设定*-top和*-bottom
blank - 空白-同时设定margin或padding在元素的四个边缘

size设定：

0 - 设定margin或是padding为0
1 - （预设）设定margin或是padding为$spacer * .25
2 - （预设）设定margin或是padding为$spacer * .5
3 -（预设）设定margin或是padding为$spacer
4 - （预设）设定margin或是padding为$spacer * 1.5
5 - （预设）设定margin或是padding为$spacer * 3
auto - 设定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达成。

Centered element

<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产生。

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的网格断点中的响应选项，以及来自$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
        ),