• spacing间隔规范（Margin与Padding间距处理）
    • 工作原理
    • 缩写CSS符约定
    • 示例
      • 水平居中
      • 负值边距属性

    spacing间隔规范（Margin与Padding间距处理）

    Bootstrap 4 内置了各种的快速缩进、隔离、填充等间距处理工具，响应余量和填充实用程序类来修改元素的外观。

    工作原理

    系统提供了一组缩写CSS，并赋予 margin 或 padding 值，包括对单个属性、所有 属性以及垂直、水平等属性的支持，距离单位是在采用 0.25rem 到 3rem，Class来源于Sass map定义。

    缩写CSS符约定

    Spacing 通用样式适用于所有屏幕尺寸，从 xs 到 xl各种规格尺寸。因为这些类是从min-width: 0及以上开始引用的，所以不受媒体查询的约束，然而，其余的屏幕断点（设备解析）包含屏幕尺寸缩写。

    对于xs屏幕，使用固定格式{property}{sides}-{size} 命名CSS方法，对于r sm、 md、lg、 xl使用 {property}{sides}-{breakpoint}-{size}格式命名CSS方法。

    如果 属性 是下列之一：

    • m - 这个Class属性会设定 margin值

    • p - 这个Class属性会设定 padding值
      边缘 设定：

    • t - 这个Class属性会设定 margin-top 或 padding-top

    • b - 这个Class属性会设定 margin-bottom 或 padding-bottom
    • l - 这个Class属性会设定 margin-left 或 padding-left
    • r - 这个Class属性会设定 margin-right 或 padding-right
    • x - 这个Class属性会设定 -left 和 -right两个值。
    • y - 这个Class属性会设定 -top 和 -bottom两个值

    • 空白 - 这个Class属性会设定 margin 或 padding 元素的四个边。
      尺寸规格定义：

    • 0 - 这个Class属性会设定 margin 或 padding 的样式值为 0

    • 1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
    • 2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
    • 3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
    • 4 - (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现
    • 5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
    • auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）。
      (你也可以对$spacers的 Sass map 调整，包括添加条目来增加更多尺寸。)

    示例

    以下是这些Class样式的代表性的示例：

    1. .mt-0 {
    2.   margin-top: 0 !important;
    3. }
    5. .ml-1 {
    6.   margin-left: ($spacer * .25) !important;
    7. }
    9. .px-2 {
    10.   padding-left: ($spacer * .5) !important;
    11.   padding-right: ($spacer * .5) !important;
    12. }
    14. .p-3 {
    15.   padding: $spacer !important;
    16. }

    水平居中

    此外,Bootstrap也包括一个 .mx-auto class样式，用于固定宽度的盒模型水平居中，具有display: block 和 width 设置水平边距内容的auto居中。

    间隔(spacing) - 图1

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

    负值边距属性

    在CSS中, margin性可以使用负值(padding 不能).截至4.2, 我们为上面列出的每个非零整数大小添加了负边际效用(例如, 1, 2, 3, 4, 5).这些实用程序非常适合跨断点自定义网格列沟槽.

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

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

    这是一个在中(md)断点及以上定制Bootstrap网格的示例.我们用.px-md-5增加了.col填充,然后在父.row上用.mx-md-n5来抵消.

    间隔(spacing) - 图2

    1. <div class="row mx-md-n5">
    2.   <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
    3.   <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
    4. </div>