间隔 | Spacing

间距

Bootstrap包含各种速记响应边距和填充实用程序类，以修改元素的外观。

怎么运行的

使用速记类为元素或其边上的子集分配响应友好margin或padding值。包括对单个属性，所有属性以及垂直和水平属性的支持。类从默认的萨斯地图范围内.25rem建立3rem。

表示法

适用于所有断点，从间距公用事业xs到xl，在他们没有断点的缩写。这是因为这些类是从上到下应用的min-width: 0，因此不受媒体查询的约束。然而，其余的断点确实包含断点缩写。

类别是使用的格式命名{property}{sides}-{size}为xs和{property}{sides}-{breakpoint}-{size}为sm，md，lg，和xl。

当属性是以下之一：

• m-用于设置margin

• p-用于设置padding

当双方是一个：

• 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

• 为设置margin或padding元素的所有四个方面

其中大小是以下之一：

• 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为自动的类

（您可以通过向$spacersSass地图变量添加条目来添加更多尺寸。）

实例

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

.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。

打开getbootstrap.com上的示例

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