如何更改导航栏中活动下拉菜单的颜色

Question

当我点击下拉菜单时，它总是以蓝色突出显示。如何使用 Bootstrap 或更改 CSS 来解决此问题？

对于这个 CSS 元素，我已经尝试更改颜色：

.dropdown-item.active, .dropdown-item:active
 color: red
 background-color: darkviolet

HTML:

<nav class="nav-justified navbar-expand-xl navbar-light">
        <div class="" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto nav-pills nav-fill">
            <li class="nav-item active">
              <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="überuns.html">Über uns</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Konakt.html">Kontakt</a>
            </li>
            <li class="nav-item dropdown dropdown">
              <a class="nav-link dropdown-toggle" href="Maschinen.html" 
id="navbarDropdown" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                  Dropdown
              </a>
              <div class="dropdown-menu" aria- 
enter code herelabelledby="navbarDropdown">
                <a class="dropdown-item" href="1.html">Element 1</a>
                <a class="dropdown-item" href="2.html">Element 2</a>
                <a class="dropdown-item" href="3.html">Element 3</a>
                <a class="dropdown-item" href="4.html">Element 4</a>
                <a class="dropdown-item" href="5.html">Element 5</a>
                <a class="dropdown-item" href="6.html">Element 6</a>
              </div>

Answer 1

.dropdown-item:active 使用这个

.dropdown-item:active{
 color: red;
 background-color: darkviolet}

<nav class="nav-justified navbar-expand-xl navbar-light">
        <div class="" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto nav-pills nav-fill">
            <li class="nav-item active">
              <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="überuns.html">Über uns</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Konakt.html">Kontakt</a>
            </li>
            <li class="nav-item dropdown dropdown">
              <a class="nav-link dropdown-toggle" href="Maschinen.html" 
id="navbarDropdown" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                  Dropdown
              </a>
              <div class="dropdown-menu" aria- 
enter code herelabelledby="navbarDropdown">
                <a class="dropdown-item" href="1.html">Element 1</a>
                <a class="dropdown-item" href="2.html">Element 2</a>
                <a class="dropdown-item" href="3.html">Element 3</a>
                <a class="dropdown-item" href="4.html">Element 4</a>
                <a class="dropdown-item" href="5.html">Element 5</a>
                <a class="dropdown-item" href="6.html">Element 6</a>
              </div>

Answer 2

默认的 css 是从 nav.scss

生成的

将此添加到您的自定义 css 文件中以更改背景颜色：

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link{
     background:darkviolet 
}

我还建议您对导航栏使用自定义 class，例如 my-custom-nav，并作为父级使用 css，例如：

.my-custom-nav .nav-link.active, 
.my-custom-nav .show>.nav-link{
     background:darkviolet 
}

如何更改导航栏中活动下拉菜单的颜色

How to change the color of an active dropdown in a navbar

html

navbar

bootstrap-4