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 
}

我还建议您对导航栏（例如my-custom-nav）使用自定义类，并在上述CSS中将其用作父类：

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

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

2 个答案: