边距

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

Margin 和 Padding

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

使用 CSS 网格布局模块?考虑使用 gap 实用程序。

符号

适用于所有断点(从 xsxxl)的间距实用程序中没有断点缩写。这是因为这些类是从 min-width: 0 及以上应用的,因此不受媒体查询的约束。但是,其余断点确实包含断点缩写。

这些类的命名格式为 {property}{sides}-{size}(用于 xs)和 {property}{sides}-{breakpoint}-{size}(用于 smmdlgxlxxl)。

其中 property 是以下之一:

  • m - 对于设置 margin 的类
  • p - 用于设置 padding 的类

其中 sides 是以下之一:

  • t - 用于设置 margin-toppadding-top 的类
  • b - 对于设置 margin-bottompadding-bottom 的类
  • s - (start)用于在 LTR 中设置 margin-leftpadding-left,在 RTL 中设置 margin-rightpadding-right 的类
  • e - (end) 用于在 LTR 中设置 margin-rightpadding-right ,在 RTL 中设置 margin-leftpadding-left 的类
  • x - 对于同时设置 *-left*-right 的类
  • y - 对于同时设置 *-top*-bottom 的类
  • 空白 - 用于在元素的所有 4 个边上设置 marginpadding 的类

其中 size 是以下之一:

  • 0 - 对于通过将其设置为 0 来消除边距或填充的类
  • 1 - (默认情况下)用于将 marginpadding 设置为 $spacer * .25 的类
  • 2 - (默认情况下)用于将 marginpadding 设置为 $spacer * .5 的类
  • 3 - (默认情况下)用于将 marginpadding 设置为 $spacer 的类
  • 4 - (默认情况下)用于将 marginpadding 设置为 $spacer * 1.5 的类
  • 5 - (默认情况下)用于将 marginpadding 设置为 $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: blockwidth 的内容)。

中心元素
<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 映射。

网格项 1
网格项 2
网格项 3
<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 相同。