Bootstrap 4 更改导航链接的鼠标悬停颜色

Question

我正在使用 Bootstrap 4 和 Sass (scss) 创建一个网站。我遇到的问题是我的导航链接是灰色的，而不是我想要的蓝色。

我能找到的所有关于这个主题的话题都建议覆盖导航项的样式。但在我看来，当你以后进行开发时，这样做可能会给你带来麻烦。因此，覆盖变量而不是样式更符合我的喜好，但某种程度上它对我来说却没起作用。

我已经通过推荐的方式覆盖了Bootstrap的样式:

• 创建包含颜色覆盖的scss文件
• 通过$theme-colors函数更改样式
• 在 bootstrap.scss 文件之前导入主题文件。

我的 _theme.scss 如下所示:

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

$blue:      #0053CB;
$blue-700:  #0F2C92;
$white:     #FFFFFF;
$green:     #39CA71;
$red:       #F1453D;
$orange:    #fd7e14;
$yellow:    #FDC02F;

$gray-100:  rgba(0,0,0,.03);

$theme-colors: (
  primary: $blue,
  secondary: $white,
  light: $white,
  dark: $blue-700,
  success: $green,
  warning: $orange,
  danger: $red,
);

// Import bootstrap as last so that the variables will be overridden
@import '~bootstrap/scss/bootstrap';

$link-hover-color 的 Bootstrap 代码（用于导航链接）如下：

$link-color:                theme-color("primary") !default;
$link-hover-color:          darken($link-color, 15%) !default;

问题在于，我定义的主题颜色在使用bg-primary等html代码时被正确使用，但是悬停和链接颜色不是我期望的蓝色，而是灰色，就像默认值一样。我设置有什么问题或者我做错了什么吗？

- Mr.wiseguy

Answer 1

$link-color 和 $link-hover-color 会影响页面上的超链接，但不会影响 Navbar 导航链接，Navbar 导航链接是通过 $navbar-light-color 和/或 $navbar-dark-color 变量来设置的。这些变量使用 $black 或 $white 的明暗程度进行定义，您可以在 variables.scss 文件中看到。

因此，假设您希望在浅色背景上使用蓝色（较深）的超链接，您可能需要将 Navbar 导航链接颜色设置为...

$navbar-light-color: rgba($primary, .5);
$navbar-light-hover-color: rgba($primary, .7);
$navbar-light-active-color: rgba($primary, .9);

演示：https://www.codeply.com/go/66E7nUGVxD

---

以上针对SASS。您仍然可以仅使用CSS自定义导航栏：Bootstrap 4导航栏颜色

- Zim

---

如果有人在下拉菜单中寻找此内容，请注意需要查找sass变量$dropdown-*. - kanlukasz