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

问题描述

我刚刚开始使用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）的背景颜色，并且每个项目都设置了文本灯。

但是问题是，是否有一种很好的方法可以使SASS能够使活动外观和悬停外观跟随该主题？

谢谢！

/亨里克

解决方法

使用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;
    }
  }
}

bootstrap-4 koala sass