主页 / 问题 / 654727
Accepted
ruslik
Asked:2020-04-17 18:44:58 +0800 CST2020-04-17 18:44:58 +0800 CST

Bootstrap 4 垫片

  • 772

Bootsrap 4 中的这个块是什么以及如何在其中设置正确的值

$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
)
html

1 个回答

  1. Best Answer

    问题中给出的块指的是新的 Bootstrap 4 实用程序 - 间隔器或“插入”、“垫”。

    该实用程序旨在方便地自适应调整元素的边距（margin）或缩进（padding）。引入这些类（在版本 4 中）是因为边距和填充（除了字体和颜色）是 Bootstrap 最常覆盖的元素。

    例如，如果您不需要 中的底部边距navbar，现在向其添加一个navbar类就足够了mb-0（实际上，“mb”是“margin-bottom”的缩写）。您可以根据需要调整边距和缩进 - 顶部、底部、右侧、左侧、所有边。

    另一个例子：该类mx-3会将元素的左右边距（默认值为 $spacer）设置为 1rem。

    对于padding，类分别以p开头：.pt(padding-top)、.pl(padding-left)等。

    以下是完整列表。

    这些类根据{свойство}{стороны}-{размер}forxs和{ свойство}{ стороны}-{брейкпойнт}-{размер}for的格式命名sm, md, lg и xl。

    特性：

    • m - 对于设置边距的类
    • p - 对于设置填充的类

    双方：

    • t - 对于设置 margin-top 或 padding-top 的类
    • b - 对于设置 margin-bottom 或 padding-bottom 的类
    • l - 对于设置 margin-left 或 padding-left 的类
    • r - 对于设置 margin-right 或 padding-right 的类
    • x - 对于同时设置 *-left 和 *-right 的类
    • y - 对于同时设置 *-top 和 *-bottom 的类
    • 空白- 用于在元素的所有 4 个边上设置边距或填充的类

    大小是以下值之一（您可以使用SASS中的 $spacers 变量添加自己的值）：

    • 0 - 对于删除边距或填充的类（它们设置为 0）
    • 1 -（默认）对于将边距或填充设置为 $spacer-x * .25 或 $spacer-y * .25 的类
    • 2 -（默认）对于将边距或填充设置为 $spacer-x * .5 或 $spacer-y * .5 的类
    • 3 -（默认）对于将边距或填充设置为 $spacer-x 或 $spacer-y 的类
    • 4 -（默认）对于将边距或填充设置为 $spacer-x * 1.5 或 $spacer-y * 1.5 的类
    • 5 -（默认）对于将边距或填充设置为 $spacer-x * 3 或 $spacer-y * 3 的类

    还有一个用于水平居中的类：（mx-auto应用于设置了宽度的块级元素）。

    阅读更多：Bootstrap 4 文档https://v4-alpha.getbootstrap.com/utilities/spacing/

    • 2

相关问题