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

【问题标题】：Bootstrap 4 - change text color of dropdown-toggle when the dropdown is openedBootstrap 4 - 打开下拉菜单时更改下拉菜单的文本颜色
【发布时间】：2021-03-23 05:30:06
【问题描述】：

我对 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>

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

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

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

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

或者添加样式

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

【讨论】：

【解决方案2】：

在css下面使用

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

【讨论】：