Question

我对 Bootstrap 还很陌生，我正在尝试更改打开的下拉菜单的颜色。正如您在下面的图片中看到的那样，当我单击“Služby”下拉菜单并打开下拉菜单时，它的下拉切换文本颜色保持白色，而我希望它是米色。我尝试了不同的 css 伪类，如 active、focus 等，但没有任何效果。

代码如下：

<!--Collapsing sidebar-->
<div class="collapse" id="sidebar">
    <div class="navbar-nav ml-auto">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html">O nás <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item my-2">
                <a class="nav-link" href="index.html">Portfolio<span class="sr-only"></span></a>
            </li>
            <li class="nav-item my-2 dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="utilitiesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Služby
                </a>
                <div class="dropdown-menu" id="dropdown-menu-sidebar" aria-labelledby="utilitiesDropdown">
                    <h6 class="dropdown-item my-1" href="#">Link 1</h6>
                    <div class="dropdown-divider"></div>
                </div>
            </li>
            <li class="nav-item my-2 dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="utilitiesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Ceník
                </a>
                <div class="dropdown-menu" aria-labelledby="utilitiesDropdown">
                    <h6 class="dropdown-item" href="#">Content &amp; Components</h6>
                    <div class="dropdown-divider"></div>
                </div>
            </li>
            <li class="nav-item my-2"><a class="nav-link" href="index.html">Objednávka<span class="sr-only"></span></a></li>
            <li class="nav-item my-2"><a class="nav-link" href="index.html">Kontakt<span class="sr-only"></span></a></li>
        </ul>
    </div>
</div>

关于在下拉菜单打开时如何让下拉菜单切换更改文本颜色的任何想法？谢谢！

Answer 1

如果您想更改该文本，我认为您可以更改导航链接...例如

<a class="nav-link text-primary..."

或添加样式

.nav-link{
 color:#000 -- The color you want
}

Answer 2

使用下面的css

 .navbar-nav .show a {
     color: brown !important; /* color you want to show */
 }

Bootstrap 4 - 打开下拉菜单时更改下拉菜单的文本颜色

2 个答案: