Question

我在理解$spacer中提到的Bootstrap 4's Spacing Documentation变量（？）时遇到问题，但无法找到相关文档。

例如：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

如果未设置变量，那么就不可能......但由于设置（right here），这无关紧要。

Answer 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 类，实质上就是说，在较小的断点（介于576像素至767像素之间）上将右边距设置为2号

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

Answer 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 == 48

无法在Bootstrap 4中使用$ spacer

3 个答案: