©
本文檔使用 php中文網手册 發布
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
为自动的类
(您可以通过向$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>