Bootstrap5 间距(Spacing)

原创 bootstrap5
半兽人 发表于: 2020-07-27   最后更新时间: 2021-08-01 23:48:37  
{{totalSubscript}} 订阅,1315 游览

间距(Spacing)

Bootstrap 包括各种很容易记住的响应margin边距padding填充gap间隙实用程序类来修改元素的外观。

它是如何工作的

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

注释

适用于所有断点的间距工具,从xsxxl,其中没有断点缩写。这是因为这些类从min-width: 0以上开始应用,因此不受媒体查询的约束。然而,其余的断点则包括一个断点缩写。

类的命名格式为:xs为{属性}{边长}-{大小}smmdlgxlxxl{属性}{边长}-{断点}-{大小}

属性是以下之一:

  • m - margin
  • p - padding

其中sides(边)是以下之一:

  • t - margin-toppadding-top
  • b - margin-bottompadding-bottom
  • l - margin-leftpadding-left
  • r - margin-rightpadding-right
  • x - both *-left*-right
  • y - both *-top*-bottom

空白(blank) - 对于在元素的所有4个边上设置 marginpadding 的类

其中 size 是以下之一:

  • 0 - 对于那些通过设置为 0 来消除 marginpadding
  • 1 - 对于将 marginpadding 设置为 $spacer * .25(默认)。
  • 2 - 对于将 marginpadding 设置为 $spacer * .5 (默认)。
  • 3 - 对于将 marginpadding 设置为 $spacer (默认)。
  • 4 - 对于将 marginpadding 设置为 $spacer * 1.5 (默认)。
  • 5 - 对于将 marginpadding 设置为 $spacer * 3 (默认)。
  • auto - 将margin设置为自动

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

示例

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

.mt-0 {
  margin-top: 0 !important;
}

.ml-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: blockwidth 的内容) .

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

在线运行

负边距(Negative margin)

在 CSS 中,margin 属性可以使用负值(padding 不能)。 这些负边距默认是禁用的,但可以通过设置 $enable-negative-margins: true 在 Sass 中启用。

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

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

Gap(间隙)

使用 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 相同。



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容



提问