无法理解 $spacer 在 Bootstrap 4 中的用法答案

【问题标题】：Unable to undertstand usage of $spacer in Bootstrap 4无法理解 $spacer 在 Bootstrap 4 中的用法
【发布时间】：2018-08-04 22:04:01
【问题描述】：

我在理解 Bootstrap 4's Spacing Documentation 中提到的 $spacer 变量（？）时遇到问题，并且找不到任何关于它的文档。

例如：1 - (by default) for classes that set the margin or padding to $spacer * .25

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

我的理解是变量的值要乘以0.25，但是如果这个值甚至没有设置，这怎么可能呢？

【问题讨论】：

你读到了这个You can add more sizes by adding entries to the $spacers Sass map variable ?
是的，我读过，但在代码中找不到。我终于设法找到该变量的位置：...\MDB Free\scss\core\bootstrap_variables.scss 无论如何感谢 Temani Afif。 =)

标签： html css sass

【解决方案1】：

如果没有设置变量，那么它是不可能的……但既然它是设置的 (right here)，那没关系。

【讨论】：

【解决方案2】：

正如昆汀所说， $spacer 的默认值为 1rem，即大多数浏览器的 16 像素。您可以通过乘以 16 * 分数（.25、.5 等）来评估结果，并在 Devtool 的 CSSBox 模型中交叉检查结果。考虑以下示例，

    <form class="form-inline ">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>

当我们在输入字段上使用 mr-sm-2 类时，这基本上是说，在小断点（576px 到 767 px 之间）上将右边距设置为 2

现在，如果您检查主题元素的右边距，它将是 16 * .5 = 8 像素。

【讨论】：

【解决方案3】：

$spacer 是一个 sass 变量。它的值为 16px 例如在 Bootstrap 中 ml-1 意思是 margin-left 大小为 1 其值为 ($spacer * 0.25) 即 16px*0.25 是 16px 的 1/4 值 == 4像素，因此填充或边距的大小 1 代表 "$spacer * .25" :4px.
对于大小 2：$spacer * .5== 16px*0.5 == 8px。现在..

大小 3：$spacer*1 [确切值] == 16px。
尺寸 4：$spacer*1.5==24px。
尺寸 5：$spacer*3 == 48px

【讨论】：

准确地说是不是 16px;它是1rem。