时间戳

首页 > 解决方案 > Bootstrap 4更改导航链接悬停颜色

twitter-bootstrap - Bootstrap 4更改导航链接悬停颜色

问题描述

我正在使用Bootstrap 4和 Sass ( 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如下：

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

问题是我定义的主题颜色bg-primary在我的 html 中使用时正确使用，但是悬停和链接颜色不是我预期的蓝色，它们是灰色的，就像默认值一样。我的设置中是否缺少某些东西或者我做错了什么？

标签： twitter-bootstrapsassbootstrap-4themes

解决方案

$link-color并$link-hover-color影响页面上的链接，但不影响 Navbar nav-links，它们是通过$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 导航栏颜色

推荐阅读