Bootstrap 包括各种简写响应式 margin、padding 的通用类别,可用来修改一个元素的外观。
赋予一个缩写 class 使 margin
或 padding
值在一个元素上或其中一个边缘上 (包含响应式)。包含支援单一个边缘属性或全部边缘、垂直边缘、水平边缘上。 Class 来自于 Sass map,范围从 .25rem
到 3rem
.
适用于所有断点的间距工具 xs
到 xl
,它们没有断点缩写。 这是因为应用了这些类 min-width: 0
并且因此不受媒体查询的约束。 但是,其余断点确实包含断点缩写。
对于 xs
,使用固定格式{property}{sides}-{size}
命名这些 Class,对于 sm
, md
, lg
, 和xl
。使用格式{property}{sides}-{breakpoint}-{size}
属性 设定:
m
这个 class 会设定 margin
p
这个 class 会设定 padding
边缘 设定:
t
这个 class 会设定 margin-top
或 padding-top
b
这个 class 会设定 margin-bottom
或 padding-bottom
l
这个 class 会设定 margin-left
或 padding-left
r
这个 class 会设定 margin-right
或 padding-right
x
这个 class 会设定 both *-left
和*-right
y
这个 class 会设定 both *-top
和*-bottom
margin
或 padding
在元素的四个边缘。尺寸 设定:
0
- 这个 class 会设定 margin
或 padding
样式值为 0
1
- (预设时) 这个 class 会设定 margin
或 padding
于 $spacer * .25
2
- (预设时) 这个 class 会设定 margin
或 padding
于 $spacer * .5
3
- (预设时) 这个 class 会设定 margin
或 padding
于 $spacer
4
- (预设时) 这个 class 会设定 margin
或 padding
于 $spacer * 1.5
5
- (预设时) 这个 class 会设定 margin
或 padding
于 $spacer * 3
auto
这个 class 会设定 the margin
to auto(你也可以对 $spacers
Sass 图形变量。)
以下是这些 class 的一些代表性范例:
.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
集合的内容,并将水平 margin 设置为 auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>