Bootstrap 4 添加更多尺寸间距

Question

我在一个网络项目的中间，部分之间的空间有 80 像素。我想在引导垫片中再创建一个选项。

目前我在 sass 代码中：

 section {
    padding: 0 80px;
}

自举间隔的范围从 .25em 到 3em (.p-5 = 40px)

我想创建一个包含 5em (80px) 的 .p-6 类

理想的情况是：

 <section class="py-5 py-md-6">

我通过 CDN 链接的引导程序。我无法想象如何用变量创建它，以某种方式将它集成到 boostrap css 中。你能给我一些线索吗？

原文由 nicogaldo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题困扰了我一个下午，直到我找到了详细的解释。很久以前就提出了问题，但无论如何都在这里：

如果您使用 SCSS，您有自己的自定义 scss 文件，并且想要添加您提到的选项，只需使其看起来像这样：

 @import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";

$spacers: (
    // The rest of numbers you need to use...
    6: ($spacer * 5)
);

@import "../bootstrap/scss/bootstrap";

该方法是 Bootstrap 文档 中解释的方法。我不得不说这对新手来说有点晦涩，但据我了解，它基本上包括导入您要修改的部分，添加您需要的值，最后导入整个内容，以便稍后使用您的添加创建您的 CSS 文件.

当然，您可能必须更改引导文件的路径并将它们本地获取到您的驱动器上。不确定从在线存储库导入是否有效。另请注意，顺序很重要。 functions.scss 必须在 variables.scss 之前导入，否则它将失败。

原文由 Jean Lannes 发布，翻译遵循 CC BY-SA 4.0 许可协议