間距
Bootstrap 包括各種速記響應邊距、填充和間隙實用程序類,用於修改元素的外觀。
邊距和填充
使用速記類將響應友好的值margin
或padding
值分配給元素或其側面的子集。包括對單個屬性、所有屬性以及垂直和水平屬性的支持。類是從默認的 Sass 映射構建的,範圍從.25rem
到3rem
.
使用 CSS 網格佈局模塊?考慮使用gap 實用程序。
符號
適用於所有斷點的間距實用程序 from xs
toxxl
中沒有斷點縮寫。這是因為這些類是自上而下應用的min-width: 0
,因此不受媒體查詢的約束。但是,其餘斷點確實包含斷點縮寫。
{property}{sides}-{size}
這些類使用forxs
和{property}{sides}-{breakpoint}-{size}
for sm
、md
、lg
、xl
和的格式命名xxl
。
如果財產是以下之一:
m
- 對於設置的類margin
p
- 對於設置的類padding
其中邊是以下之一:
t
- 對於設置margin-top
或padding-top
b
- 對於設置margin-bottom
或padding-bottom
s
- (開始)用於設置margin-left
或padding-left
LTRmargin-right
或padding-right
RTL中的類e
-(結束)對於設置margin-right
或padding-right
在 LTRmargin-left
或padding-left
RTL中的類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;
}
.ms-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
不能)。這些負邊距默認是禁用的,但可以在 Sass 中通過設置啟用$enable-negative-margins: true
。
語法與默認的正邊距實用程序幾乎相同,但n
在請求的大小之前添加了。這是一個與以下相反的示例類.mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
差距
使用時display: grid
,您可以使用gap
父網格容器上的實用程序。這可以節省必須將邊距實用程序添加到單個網格項(display: grid
容器的子項)的情況。Gap 實用程序默認是響應式的,並且是通過我們的實用程序 API 生成的,基於$spacers
Sass 映射。
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
支持包括所有 Bootstrap 網格斷點的響應選項,以及$spacers
地圖中的六種尺寸 ( 0
- 5
)。沒有.gap-auto
實用程序類,因為它實際上與.gap-0
.
薩斯
地圖
間距實用程序通過 Sass 映射聲明,然後使用我們的實用程序 API 生成。
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
實用程序 API
間距實用程序在我們的實用程序 API 中聲明scss/_utilities.scss
。了解如何使用實用程序 API。
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),