无法理解 Bootstrap 4 中 $spacer 的用法

Question

我在理解Bootstrap 4 的间距文档中提到的$spacer变量(?) 时遇到问题，但找不到任何关于它的文档。

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

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

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

Answer 1

如果未设置变量，则不可能……但既然已设置（就在此处），那就无所谓了。

Answer 2

正如 Quentin 所指出的，$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 = 8px。