in English
间距
Bootstrap 包括各种速记响应边距和填充实用程序类来修改元素的外观。
这个怎么运作
使用速记类将响应友好的值margin
或padding
值分配给元素或其侧面的子集。包括对单个属性、所有属性以及垂直和水平属性的支持。类是从默认的 Sass 映射构建的,范围从.25rem
到3rem
.
符号
适用于所有断点的间距实用程序 from xs
toxl
中没有断点缩写。这是因为这些类是自上而下应用的min-width: 0
,因此不受媒体查询的约束。但是,其余断点确实包含断点缩写。
{property}{sides}-{size}
这些类使用forxs
和{property}{sides}-{breakpoint}-{size}
for 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
- 空白 - 对于在元素的所有 4 个边上设置 a
margin
或的类padding
其中size是以下之一:
0
- 对于消除margin
或padding
通过将其设置为的类0
1
- (默认情况下)用于设置margin
orpadding
的类$spacer * .25
2
- (默认情况下)用于设置margin
orpadding
的类$spacer * .5
3
- (默认情况下)用于设置margin
orpadding
的类$spacer
4
- (默认情况下)用于设置margin
orpadding
的类$spacer * 1.5
5
- (默认情况下)用于设置margin
orpadding
的类$spacer * 3
auto
- 对于设置margin
为自动的类
$spacers
(您可以通过向Sass 映射变量添加条目来添加更多大小。)
例子
以下是这些类的一些代表性示例:
.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;">
Centered element
</div>
负边距
在 CSS 中,margin
属性可以使用负值(padding
不能)。1
从 4.2 开始,我们为上面列出的每个非零整数大小(例如,、、、、、)添加了负边距实用2
程序。这些实用程序非常适合跨断点自定义网格列装订线。3
4
5
语法与默认的正边距实用程序几乎相同,但n
在请求的大小之前添加了。这是一个与以下相反的示例类.mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
md
这是在中 ( ) 断点及以上处自定义 Bootstrap 网格的示例。我们增加了.col
padding ,.px-md-5
然后.mx-md-n5
在 parent 上抵消了它.row
。
自定义列填充
自定义列填充
<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>