Bootstrap 包括各种速记响应边距、填充和间隙实用程序类,用于修改元素的外观。
Margin 和 Padding
使用速记类将响应友好的 margin
或 padding
分配给元素或其边的子集。包括对单个属性、所有属性以及垂直和水平属性的支持。类是从默认的 Sass 映射构建的,范围从 .25rem
到 。
使用 CSS 网格布局模块?考虑使用 gap 实用程序。
符号
适用于所有断点(从 xs
到 xxl
)的间距实用程序中没有断点缩写。这是因为这些类是从 min-width: 0
及以上应用的,因此不受媒体查询的约束。但是,其余断点确实包含断点缩写。
这些类的命名格式为 {property}{sides}-{size}
(用于 xs
)和 {property}{sides}-{breakpoint}-{size}
(用于 sm
、md
、lg
、xl
和 xxl
)。
其中 property 是以下之一:
m
- 对于设置margin
的类p
- 用于设置padding
的类
其中 sides 是以下之一:
t
- 用于设置margin-top
或padding-top
的类b
- 对于设置margin-bottom
或padding-bottom
的类s
- (start)用于在 LTR 中设置margin-left
或padding-left
,在 RTL 中设置margin-right
或padding-right
的类e
- (end) 用于在 LTR 中设置margin-right
或padding-right
,在 RTL 中设置margin-left
或padding-left
的类x
- 对于同时设置*-left
和*-right
的类y
- 对于同时设置*-top
和*-bottom
的类- 空白 - 用于在元素的所有 4 个边上设置
margin
或padding
的类
其中 size 是以下之一:
0
- 对于通过将其设置为 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
设置为 auto 的类
(您可以通过向 $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
类,用于通过将水平边距设置为 auto 来水平居中固定宽度的块级内容(即具有 display: block
和 width
的内容)。
<div class="mx-auto" style="width: 200px;"> 中心元素 </div>
负边距
在 CSS 中,margin
属性可以使用负值(padding
不能)。这些负边距默认是禁用的,但可以在 Sass 中通过设置 $enable-negative-margins: true
来启用。
语法几乎与默认的正 margin
实用程序相同,但在请求的大小之前添加了 n
。这是一个与 .mt-1
相反的示例类:
.mt-n1 { margin-top: -0.25rem !important; }
差距
使用 display:grid
时,您可以在父网格容器上使用间隙实用程序。这可以节省向单个网格项目(显示的子项:网格容器)添加边距实用程序的麻烦。 Gap
实用程序默认是响应式的,并且是通过我们的实用程序 API 生成的,基于 $spacers
Sass 映射。
<div class="d-grid gap-3"> <div class="p-2 bg-light border">网格项 1</div> <div class="p-2 bg-light border">网格项 2</div> <div class="p-2 bg-light border">网格项 3</div> </div>
支持包括所有 Bootstrap 网格断点的响应选项,以及 $spacers
映射 (0
-5
) 中的六种尺寸。没有 .gap-auto
实用程序类,因为它实际上与 .gap-0
相同。