Bootstrap 文档解释了如何 enable负边距 - 但这是针对定制 Bootstrap 的情况。
我正在从 CDN 使用它,但我仍然需要那些类(例如 mt-n1
)。我想通过混合(或类似的东西)将它们导入我的 scss。 "Utility API"表明这是可能的,但我不确定如何从我的 scss 文件中调用它。
我该怎么做?
例如:
// import bootstrap
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
// generate negative margin from $utilities:"negative-margin"
// ... <---what goes here?
我尝试了 @include generate-utility("negative-margin")
但失败了。
最佳答案
您必须将 BS5 变量 $enable-negative-margins
设置为 true
并将其插入到 variables.scss
包含之前。
然后,删除所有实用程序,只包含您想要的,参见示例:
// enabling negative margins
$enable-negative-margins: true;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
// remove all utilities and include only what you want
$utilities: (
(
"negative-margin": map-get($utilities, "negative-margin"),
"negative-margin-x": map-get($utilities, "negative-margin-x"),
"negative-margin-y": map-get($utilities, "negative-margin-y"),
"negative-margin-top": map-get($utilities, "negative-margin-top"),
"negative-margin-end": map-get($utilities, "negative-margin-end"),
"negative-margin-bottom": map-get($utilities, "negative-margin-bottom"),
"negative-margin-start": map-get($utilities, "negative-margin-start"),
)
);
// generate utilities
@import "bootstrap/scss/utilities/api";
关于twitter-bootstrap - 从我的 scss 文件中使用 Bootstrap 的实用程序 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72374486/