间距
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
),