?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
Bootstrap包含各種速記響應(yīng)邊距和填充實(shí)用程序類,以修改元素的外觀。
使用速記類為元素或其邊上的子集分配響應(yīng)友好margin
或padding
值。包括對單個(gè)屬性,所有屬性以及垂直和水平屬性的支持。類從默認(rèn)的薩斯地圖范圍內(nèi).25rem
建立3rem
。
適用于所有斷點(diǎn),從間距公用事業(yè)xs
到xl
,在他們沒有斷點(diǎn)的縮寫。這是因?yàn)檫@些類是從上到下應(yīng)用的min-width: 0
,因此不受媒體查詢的約束。然而,其余的斷點(diǎn)確實(shí)包含斷點(diǎn)縮寫。
類別是使用的格式命名{property}{sides}-{size}
為xs
和{property}{sides}-{breakpoint}-{size}
為sm
,md
,lg
,和xl
。
當(dāng)屬性是以下之一:
m
-用于設(shè)置margin
p
-用于設(shè)置padding
當(dāng)雙方是一個(gè):
t
-用于設(shè)置margin-top
或padding-top
b
-用于設(shè)置margin-bottom
或padding-bottom
l
-用于設(shè)置margin-left
或padding-left
r
-用于設(shè)置margin-right
或padding-right
x
-對于設(shè)置兩者的類*-left
和*-right
y
-對于設(shè)置兩者的類*-top
和*-bottom
為設(shè)置margin
或padding
元素的所有四個(gè)方面
其中大小是以下之一:
0
- 用于消除margin
或padding
通過設(shè)置的類0
1
- (默認(rèn)情況下)的類時(shí),設(shè)置margin
或padding
以$spacer * .25
2
- (默認(rèn)情況下)的類時(shí),設(shè)置margin
或padding
以$spacer * .5
3
- (默認(rèn)情況下)的類時(shí),設(shè)置margin
或padding
以$spacer
4
- (默認(rèn)情況下)的類時(shí),設(shè)置margin
或padding
以$spacer * 1.5
5
- (默認(rèn)情況下)的類時(shí),設(shè)置margin
或padding
以$spacer * 3
auto
- 用于設(shè)置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還包含一個(gè).mx-auto
用于將固定寬度塊級別內(nèi)容水平居中的類,即具有display: block
和width
設(shè)置水平邊距的內(nèi)容auto
。
<div class="mx-auto" style="width: 200px;"> Centered element</div>