系统提供了一组缩写CSS，并赋予 margin 或 padding 值，包括对单个属性、所有 属性以及垂直、水平等属性的支持，距离单位是在采用 0.25rem 到 3rem，Class来源于Sass map定义。

缩写CSS符约定

Spacing 通用样式适用于所有屏幕尺寸，从 xs 到 xl 各种规格尺寸。因为这些类是从 min-width: 0 及以上开始引用的，所以不受媒体查询的约束，然而，其余的屏幕断点（设备解析）包含屏幕尺寸缩写。

对于 xs 屏幕，使用固定格式 {property}{sides}-{size} 命名CSS方法，对于 sm、 md、lg、 xl 使用 {property}{sides}-{breakpoint}-{size} 格式命名CSS方法。

如果 属性 是下列之一：

• m - 这个Class属性会设定 margin 值
• p - 这个Class属性会设定 padding 值

边缘 设定：

• t - 这个Class属性会设定 margin-top 或 padding-top
• b - 这个Class属性会设定 margin-bottom 或 padding-bottom
• l - 这个Class属性会设定 margin-left 或 padding-left
• r - 这个Class属性会设定 margin-right 或 padding-right
• x - 这个Class属性会设定 *-left 和 *-right 两个值。
• y - 这个Class属性会设定 *-top 和 *-bottom 两个值
• 空白 - 这个Class属性会设定 margin 或 padding 元素的四个边。

尺寸规格定义：

• 0 - 这个Class属性会设定 margin 或 padding 的样式值为 0
• 1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
• 2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
• 3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
• 4 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * 1.5规格呈现
• 5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
• auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）。

(你也可以对$spacers的 Sass map 调整，包括添加条目来增加更多尺寸。)

以下是这些Class样式的代表性的示例

.mt-0 {
  margin-top: 0 !important;
}

.ml-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 设置水平边距内容的auto居中。

<div class="mx-auto" style="width: 200px;background-color: rgba(0,0,255,.1)">
  Centered element
</div>

负值边距属性

在CSS中, margin 性可以使用负值( padding 不能)。截至4.2, 我们为上面列出的每个非零整数大小添加了负边际效用(例如, 1, 2, 3, 4, 5 ).这些实用程序非常适合跨断点自定义网格列边距。

语法与默认的正边距实用程序几乎相同,但在请求的大小之前添加了 n。这是一个与 .mt-1 相反的示例:

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

这是一个在中( md )断点及以上定制Bootstrap网格的示例。我们用 .px-md-5 增加了 .col 填充,然后在父 .row 上用 .mx-md-n5 来抵消。

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>