Css 引导程序4 SCS：如何混合引导程序'；s pb-x pm-x值到自定义类？

我想从中删除pb-x和pm-x类：

<div class="my-title pb-4 pm-4"> ... </div>

但问题是没有这样的混合（BS发布了一些类作为混合，但这次没有）

在此处创建间距pb-x pm-x：

---

看起来我需要访问$spacers数组并引用第四个元素？我该怎么做

您是否尝试了

@extend

？不确定以下代码是否符合您的目的

.my-title{
    @extend .pb-4;
    @extend .pm-4;
}

您如何在定义的scss文件中导入引导。我的标题？ 假设您在index.scss文件中定义了.my title

然后，您可以使用

@import "path/to/bootstrap.css";

如果包含

.css

文件无效，请尝试将

bootstrap.css

重命名为

bootstrap.scss

。这肯定会奏效。现在，如果需要，您可以从导入操作

.scss

扩展名

@import "path/to/bootstrap";

---

您需要使用

@extend

而不是

@import

。引导中没有

pm-4

类。你是说

mb-4

.my-title{
    @extend .pb-4;
    @extend .mb-4;
}

---

由于在bs\u variables.css中方便地定义了

$spacer

，我发现我的目标可以通过以下方式实现：

.my-title {
    // ...
    padding-bottom: map-get($spacers, 3); // .pb-3
    margin-bottom: map-get($spacers, 4); // .pm-4
}

---

此外，还可以使用这种方法创建自定义mixin（pb-3）或占位符（%pb-3）类。我喜欢用缺少的类来扩展bs，这些类发布了它们的变量（例如，缺少了输入颜色），但这次我只使用简单的

map get（$spacers，3）

谢谢，我读了几篇文章，由于css代码生成的特殊性，不建议使用extend。但我会用它来做实验，这是一个非常有效的观点

@extend

应仅用于占位符类，而不是实际类。

.my-title {
    // ...
    padding-bottom: map-get($spacers, 3); // .pb-3
    margin-bottom: map-get($spacers, 4); // .pm-4
}