間距
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 映射變量添加條目來添加更多大小。)
以下是這些類的一些代表性示例:
此外,Bootstrap 還包括一個.mx-auto
用於水平居中固定寬度塊級內容的類,即具有display: block
和width
集合的內容,方法是將水平邊距設置為auto
.
居中元素