在 Bootstrap 4.5 中设置下拉项目的活动外观答案

【问题标题】：Set active appearance of a Dropdown Item in Bootstrap 4.5在 Bootstrap 4.5 中设置下拉项目的活动外观
【发布时间】：2020-09-15 07:28:30
【问题描述】：

我刚刚开始使用 SASS 和 Bootstrap 创建自己的主题，但在导航栏中的下拉项的活动外观方面遇到了问题。老实说，我也想更改悬停外观。

我的代码如下所示：

<li class="nav-item dropdown">
<NavLink href="#" class="nav-link dropdown-toggle text-nowrap" data-toggle="dropdown">
                                        Admin
                        </NavLink>
                        <div class="dropdown-menu bg-customblue1">
                            <NavLink class="nav-link dropdown-item text-light" href="users">Users</NavLink>
                                        <NavLink class="nav-link dropdown-item text-light" href="roles">Roles</NavLink>
                        </div>
</li>

我已经根据我的新主题 (bg-customblue1) 设置了下拉菜单 (dropdown-menu) 的背景颜色，并且每个项目都有 text-light。

但问题是是否有一种涉及 SASS 的好方法来让活动和悬停外观遵循该主题？

谢谢！

/亨里克

【问题讨论】：

好吧，你说的一个涉及SASS的好方法是什么意思？您是要直接在 Bootstrap variables.scss 内更改值还是覆盖外部 - 那么 Sass 绝对不需要。不过.dropdown-item.active, .dropdown-item:active 是选择器。
我的意思是，如果我使用 sass 创建主题，如果您可以将特定的类分配给 html 元素，这样您就可以根据创建的主题获得正确的效果。直接在网页中使用 css 覆盖一个类并不是我的想法，但我知道它会起作用。这就是我写作的想法。

标签： css bootstrap-4 sass koala

【解决方案1】：

使用 Bootstrap，活动项目应该添加一个类 .active，如文档 here 中所述。

因此，您可以修改 Bootstrap variables.scss 并将 $dropdown-link-active-color 和 $dropdown-link-active-bg 更改为活动时所需的颜色，并将 $dropdown-link-hover-color 和 $dropdown-link-hover-bg 更改为悬停时的颜色。

或者您可以编写自己的 SASS 来实现此目的：

.dropdown-menu {

  .dropdown-item:hover {
    color: $light;
    background-color: $customblue-1;
  }
  
  .dropdown-item.active {
    color: $light;
    background-color: $customblue-1;
    
    &:hover {
      background-color: $customblue-2;
    }
  }
}

【讨论】：

我尝试了您的方法并将其包含在我的 custom.scss 中，但字体颜色（颜色）没有加入并覆盖默认行为。知道为什么吗？