Question

我只是从Bootstrap 4和Sass开始。我一辈子都无法弄清楚如何覆盖默认的.alert- [whatever]样式。

如果我有

<div class="alert alert-success">Hello!</div>

它会创建一个带有Bootstrap 4附带的默认绿色阴影的警报。唯一可以覆盖它的方法是使用自己的.alert-success自定义CSS样式。我宁愿像使用其他颜色一样使用内置变量来覆盖它，但是我不知道是否可以选择？

我的.scss文件中有：

$blue: #3498db;
$green: #37bf91;

$theme-colors: (
  "primary": $blue,
  "success": $green,
);

我假设.alert-success只会使用我在.scss文件中指定的$green，但事实并非如此。

我试图做$alert-success: $green;，它也不会改变任何东西。

解决这个问题的正确方法是什么？

Answer 1

这类似于：How to change the bootstrap primary color?确保在覆盖之后导入Bootstrap ，我将回答与警报有关的问题。

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   
$blue: #3498db;
$green: #37bf91;

$theme-colors: (
  primary: $blue,
  success: $green,
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

演示：https://www.codeply.com/go/NCfqvU3Upe

对于警报，背景颜色和文本颜色是使用主题颜色上的SASS darken函数得出的。默认值为：

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;

负数会使原始主题颜色变亮，正数会使颜色变暗。因此，例如，如果要使成功警报bg接近实际的$ green颜色，则可以调整警报变量：

$alert-bg-level:0; // this negates the darken function
$alert-border-level:1;
$alert-color-level:-10;

我更新了demo来显示此内容。

如何在Bootstrap 4中覆盖.alert- [style]？

1 个答案: