Bootstrap 间距
Bootstrap 间距
Bootstrap 间距
间距实用程序用于将响应友好的边距或填充值分配给带有速记类的元素或其侧面的子集。它包括单个属性，所有属性以及垂直和水平属性。
它是从默认的Sass映射(从.25rem到3rem)构建的类。
符号
适用于所有对象的间距实用程序从xs到xl的断点中没有断点的缩写。这是因为这些类是从min-width: 0开始使用的，并且不受媒体查询的约束。但是，其余的断点确实包含断点的缩写。
使用xs和{property} {sides}-{breakpoint}-的{property} {sides-{size}格式来命名类。 {size}用于sm，md，lg和xl。
此处，"属性"是以下内容之一:
m-用于设置边距的类
p-用于设置填充的类
"侧面"是以下之一:
t-用于设置margin-top或padding-top的类。
b-它用于设置margin-bottom或padding-bottom的类。
l-用于设置margin-left或padding-left的类。
r-用于设置边距为右或填充为右的类。
x-用于同时设置*-left和*-right的类。
y-用于同时设置*-top和*-bottom的类。
blank-用于在元素的所有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>