间距处理 Sizing props and classes

Bootstrap v4 CSS方法中的maring和padding类方法。

工作原理

使用shorthand类将响应友好的边距或填充值分配给元素或其侧面的子集。 包括对单个属性，所有属性以及垂直和水平属性的支持。根据默认的Sass映射（从.25rem到3rem）构建类。

符号

适用于从xs到xl的所有断点的间距实用程序中没有断点的缩写。 这是因为这些类是从min-width: 0开始使用的，因此不受媒体查询的约束。 但是，其余的断点确实包含断点的缩写。

这些类使用xs的{property}{sides}-{size} 和sm, md, lg,和 xl的 {property}{sides}-{breakpoint}-{size}格式命名。

其中 属性是以下之一:

• m - 对于设置边距的类
• p - 用于设置填充的类

其中sides是以下之一:

• t - 对于设置margin-top或padding-top的类
• b - 对于设置margin-bottom或padding-bottom的类
• l - 对于设置margin-left或padding-left的类
• r - 对于设置margin-right或padding-right的类
• x - 对于同时设置*-left和*-right的类
• y - 对于同时设置*-top和*-bottom的类
• blank - 用于在元素的所有4个边上设置margin或padding的类

其中size是以下之一:

• 0 - 对于通过将其设置为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的类

（您可以通过将条目添加到$spacers Sass映射变量来添加更多大小。）

例子

以下是这些类的一些代表性示例：

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

.ml-1 {
  margin-left: ($spacer * 0.25) !important;
}

.px-2 {
  padding-left: ($spacer * 0.5) !important;
  padding-right: ($spacer * 0.5) !important;
}

.p-3 {
  padding: $spacer !important;
}

水平居中

此外，Bootstrap还包括一个.mx-auto类，用于水平居中固定宽度块级内容， 即具有display: block的内容和通过将水平边距设置为auto而设置的width。

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