间距

间距-Bootstrap 5和Material Design 2.0

MDB包括各种速记响应边距和填充实用程序类,可进行修改 元素的外观。


这个怎么运作

为元素分配响应友好的 margin padding 值 具有速记类别的一面的子集。包括对单个属性的支持,所有 属性以及垂直和水平属性。从默认的Sass映射构建类 范围从 .25rem 3rem


符号

适用于从 xs xxl 的所有断点的间距实用程序, 其中没有断点的缩写。这是因为这些类是从 min-width:0 及更高版本,因此不受媒体查询的约束。剩余的 但是,断点确实包含断点的缩写。

这些类的格式为 {property} {sides-{size} xs {property} {sides- {breakpoint}-{size} for sm md lg xl xxl

其中 property 是以下之一:

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

其中 sides 是以下之一:

  • t -用于设置 margin-top padding-top
  • b -用于设置 margin-bottom padding-bottom
  • s -用于设置 margin-left padding-left
  • e -用于设置 margin-right 向右填充
  • x -用于同时设置 *-left *-右
  • y -对于同时设置 *-top *-底部
  • 空白-适用于在其所有4面上设置 margin padding 的类 元素

其中 size 是以下之一:

  • 0 -用于消除 margin 或 通过将其设置为 0 填充
  • 1 -(默认情况下)用于设置 margin 填充到 $ spacer * .25
  • 2 -(默认情况下)用于设置 margin padding 到 $ spacer * .5
  • 3 -(默认情况下)用于设置 margin 填充到 $ spacer
  • 4 -(默认情况下)用于设置 margin 填充到 $ spacer * 1.5
  • 5 -(默认情况下)用于设置 margin 填充到 $ 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 类,用于水平 居中固定宽度块级别的内容-即具有以下内容的内容 通过设置水平边距来设置 display:block width auto

Centered element

            <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 时,您可以在 父网格容器。这样可以省去向单个网格添加保证金实用程序的麻烦 项( display:grid 容器的子项)。差距实用程序通过以下方式响应 默认值,并通过我们的实用程序API根据 $ spacers Sass生成 地图。

Grid item 1
Grid item 2
Grid item 3

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