Skip to main content Skip to docs navigation
View on GitHub

Spacing间距

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.Bootstrap包括一系列快速响应的margin、padding和gap实用程序类，用于修改元素的外观。

On this page本页内容

Margin and padding边距和填充

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. 使用速记类为元素或其边的子集分配响应友好的margin或padding值。Includes support for individual properties, all properties, and vertical and horizontal properties. 包括对单个属性、所有属性以及垂直和水平属性的支持。Classes are built from a default Sass map ranging from .25rem to 3rem.类是从默认的Sass映射构建的，范围从.25rem到3rem。

Using the CSS Grid layout module? Consider using the gap utility.使用CSS网格布局模块？考虑使用gap实用程序。

Notation符号

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. 适用于所有断点（从xs到xxl）的间距实用程序中没有断点缩写。This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. 这是因为这些类是从min-width: 0开始应用的，因此不受媒体查询的约束。The remaining breakpoints, however, do include a breakpoint abbreviation.然而，其余的断点确实包含断点缩写。

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.对于xs，这些类使用格式{property}{sides}-{size}，而对于sm、md、lg、xl和xxl，则使用格式{property}{sides}-{breakpoint}-{size}来命名。

Where property is one of:如果property是以下之一：

  • m - for classes that set margin用于设置margin的类
  • p - for classes that set padding用于设置padding的类

Where sides is one of:其中sides是以下之一：

  • t - for classes that set margin-top or padding-top用于设置margin-top或padding-top的类
  • b - for classes that set margin-bottom or padding-bottom用于设置margin-bottom或padding-bottom的类
  • s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL用于在LTR中设置margin-left或padding-left，在RTL中设置margin-right或padding-right的类
  • e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL对于在LTR中设置margin-right或padding-right的类，在RTL中设置margin-left或padding-left的类
  • x - for classes that set both *-left and *-right对于同时设置*-left和*-right的类
  • y - for classes that set both *-top and *-bottom对于同时设置*-top和*-bottom的类
  • blank - for classes that set a margin or padding on all 4 sides of the element对于在元素的所有4个边上设置margin或padding的类

Where size is one of:其中size为：

  • 0 - for classes that eliminate the margin or padding by setting it to 0对于通过将其设置为0来消除margin或padding的类
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)（可以通过向$spacers Sass映射变量添加条目来添加更多大小。）

Examples示例

Here are some representative examples of these classes:以下是这些类的一些代表性示例：

.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;
}

Horizontal centering水平居中

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.此外，Bootstrap还包括一个.mx-auto类，用于水平居中固定宽度块级内容，即具有display: block和通过将水平边距设置为auto设置的width的内容。

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

Negative margin负边距

In CSS, margin properties can utilize negative values (padding cannot). These negative margins are disabled by default, but can be enabled in Sass by setting $enable-negative-margins: true.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:

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

Gap

When using display: grid, you can make use of gap utilities on the parent grid container. 使用display:grid时，可以使用父栅格容器上的gap工具。This can save on having to add margin utilities to individual grid items (children of a display: grid container). 这可以节省向单个网格项（display: grid容器的子项）添加边距实用程序的费用。Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.默认情况下，Gap实用程序是响应的，并通过实用程序API生成，基于$spacers Sass映射。

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>

Support includes responsive options for all of Bootstrap’s grid breakpoints, as well as six sizes from the $spacers map (0–5). 支持包括所有Bootstrap网格断点的响应选项，以及$spacers映射中的六个大小（0-5）。There is no .gap-auto utility class as it’s effectively the same as .gap-0.没有.gap-auto实用程序类，因为它实际上与.gap-0相同。

Sass

Maps

Spacing utilities are declared via Sass map and then generated with our utilities API.间隔实用程序通过Sass映射声明，然后使用实用程序API生成。

$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API实用程序API

Spacing utilities are declared in our utilities API in scss/_utilities.scss. 间隔实用程序在实用程序API中以scss/_utilities.scss的形式声明。Learn how to use the utilities API.了解如何使用实用程序API。

    "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
),