Bootstrap V5.3 : Spacing 间距中文翻译版

Bootstrap 包括各种速记响应式边距、填充和间隙实用程序类，用于修改元素的外观。

边距和填充

使用速记类将响应友好或值分配给元素或其边的子集。包括对单个属性、所有属性以及垂直和水平属性的支持。类是从默认的 Sass 映射构建的，范围从到。marginpadding.25rem3rem

使用 CSS 网格布局模块？请考虑改用间隙实用程序。

表示法

应用于所有断点（从到）的间距实用程序中没有断点缩写。这是因为这些类是从上应用的，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。xsxxlmin-width: 0

这些类的命名格式为和 for 、、、和。{property}{sides}-{size}xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

其中财产是以下之一：

m– 对于将margin
p– 对于将padding

其中 sides 是以下之一：

t– 对于设置或margin-toppadding-top
b– 对于设置或margin-bottompadding-bottom
s– （开始）用于在 LTR 中或 RTL 中设置的类margin-leftpadding-leftmargin-rightpadding-right
e– （结束）对于在 LTR 中或 RTL 中设置的类margin-rightpadding-rightmargin-leftpadding-left
x– 对于同时设置和*-left*-right
y– 对于同时设置和*-top*-bottom
blank – 用于在元素的所有 4 个边上设置或的类marginpadding

其中 size 是以下之一：

0– 对于通过将其设置为marginpadding0
1– （默认情况下）对于将或设置为marginpadding$spacer * .25
2– （默认情况下）对于将或设置为marginpadding$spacer * .5
3– （默认情况下）对于将或设置为marginpadding$spacer
4– （默认情况下）对于将或设置为marginpadding$spacer * 1.5
5– （默认情况下）对于将或设置为marginpadding$spacer * 3
auto– 对于将设置为 auto 的类margin

（您可以通过向 Sass 映射变量添加条目来添加更多大小。$spacers

例子

以下是这些类的一些代表性示例：

.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-autodisplay: blockwidthauto

居中元素

<div class="mx-auto p-2" style="width: 200px;">
  Centered element
</div>

负边距

在 CSS 中，属性可以使用负值（ cannot）。默认情况下，这些负边距是禁用的，但可以通过设置在 Sass 中启用。marginpadding$enable-negative-margins: true

语法与默认的正边距实用程序几乎相同，但在请求的大小之前添加了。这是一个与以下相反的示例类：n.mt-1

.mt-n1 {
  margin-top: -0.25rem !important;
}

差距

使用或时，您可以使用父元素上的实用程序。这可以节省向网格或弹性容器的各个子级添加保证金实用程序的必要性。默认情况下，Gap 实用程序是响应式的，并且通过我们的实用程序 API 生成，基于 Sass 映射。display: griddisplay: flexgap$spacers

网格项 1

网格项 2

网格项 3

网格项 4

[HTML全文]

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

支持包括 Bootstrap 所有网格断点的响应式选项，以及映射中的六种大小（–）。没有实用程序类，因为它实际上与相同。$spacers05.gap-auto.gap-0

行间隙

row-gap设置指定容器中子项之间的垂直间距。

网格项 1

网格项 2

网格项 3

网格项 4

[HTML全文]

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

列间隙

column-gap设置指定容器中子项之间的水平间距。

网格项 1

网格项 2

网格项 3

网格项 4

[HTML全文]

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

CSS系统

萨斯地图

间距实用程序通过 Sass 映射声明，然后使用我们的实用程序 API 生成。

scss/_variables.scss

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Sass 实用程序 API

间距实用程序在我们的实用程序 API 中声明。了解如何使用实用工具 API。scss/_utilities.scss

scss/_utilities.scss

"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
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Spacing 间距

边距和填充

表示法

例子

水平定心

负边距

差距

行间隙

列间隙

CSS系统

萨斯地图

Sass 实用程序 API