bootstrap间距spacing

本文概述

• 符号
• 水平居中

间距实用程序用于将响应友好的边距或填充值分配给具有速记类别的元素或其侧面的子集。它包括单个属性，所有属性以及垂直和水平属性。

它的类从默认的Sass映射生成，范围从.25rem到3rem。

符号

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

对于xs，使用{property} {sides- {size}的格式命名，对于sm，md，lg和xl，使用{property} {sides- {breakpoint}-{size}的格式命名。

在此，“财产”是以下之一：

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

“边”是以下之一：

• 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的类。
• 空白-用于在元素的所有4个面上设置边距或填充的类。

“大小”是以下之一：

• 0-用于通过将其设置为0消除边距或填充的类
• 1-（默认）它用于将边距或填充设置为$ spacer-x * .25或$ spacer-y * .25的类
• 2-（默认情况下）用于将边距或填充设置为$ spacer-x * .5或$ spacer-y * .5的类
• 3-（默认情况下）用于将边距或填充设置为$ spacer-x或$ spacer-y的类
• 4-（默认情况下）用于将边距或填充设置为$ spacer-x * 1.5或$ spacer-y * 1.5的类
• 5-（默认情况下）用于将边距或填充设置为$ spacer-x * 3或$ spacer-y * 3的类

注意：你可以通过将条目添加到$ spacers Sass映射变量来添加更多大小。

例

让我们举个例子来看一下这些类的用法：

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

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

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

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

水平居中

Bootstrap还支持.mx-auto类，以使居中固定宽度的块级内容水平居中。通过将水平边距设置为自动来显示内容：块和宽度？

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