折叠时更改引导导航栏下拉菜单中的字体颜色

Question

我一直在尝试更改图像中显示的字体颜色，使其清晰可见。

这是一个基本的 bootstrap 3 导航栏。这是html代码

<nav class="navbar navbar-custom">
    <div class="container">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-spacer"></div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="first"><a href="/">Home</a></li>
                    <li class="dropdown ">
                        <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="link1-1.htm">Item 1-1</a></li>
                            <li><a href="link1-2.htm">Item 1-2</a></li>
                            <li><a href="link1-3.htm">Item 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="link2.htm">Item 2</a></li>
                    <li><a href="link3.htm">Item 3</a></li>
                    <li><a href="link4.htm">Item 4</a></li> 
                </ul>
            </div>
        </div>
    </div>
</nav>

这就是我试图改变字体颜色的方法

@media (max-width: 767) {
  .dropdown-menu > li > a{
    color: #ffffff !important;
  }
  .navbar-custom .container .container-fluid .navbar-nav .open .dropdown-menu > li > a  {
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a,
  .navbar-custom .navbar-nav .open .dropdown-menu {
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #b0cb36;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #b0cb36;
    background-color: #003748;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
}

我没有尝试过将深色字体改成较浅的字体

Answer 1

我们对您的媒体查询的主要问题 - 您需要包含单位，例如@media (max-width: 767px)

修正后，您只需要使用更具体的选择器来覆盖 Bootstrap CSS，而不是使用 !important。您需要覆盖的选择器是：

• .dropdown-menu>li>a
• .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover

添加 .navbar-nav 类就足够了，例如.navbar-nav .dropdown-menu>li>a - 你不想让它太具体，因为如果你想在未来再次覆盖它会变得更加困难。

工作示例（除了我删除了折叠类以便我们可以在 sn-p 中看到它）

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu>li>a {
    color: red;
  }
  .navbar-nav .dropdown-menu>li>a:hover,
  .navbar-nav .dropdown-menu>li>a:focus {
    color: lime;
    background-color: transparent;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom">
  <div class="container">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="navbar-spacer"></div>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      </div>
      <div id="navbar" class="">
        <ul class="nav navbar-nav">
          <li class="first"><a href="/">Home</a></li>
          <li class="dropdown ">
            <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="link1-1.htm">Item 1-1</a></li>
              <li><a href="link1-2.htm">Item 1-2</a></li>
              <li><a href="link1-3.htm">Item 1-3</a></li>
            </ul>
          </li>
          <li><a href="link2.htm">Item 2</a></li>
          <li><a href="link3.htm">Item 3</a></li>
          <li><a href="link4.htm">Item 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 2

添加“text-danger”类或您喜欢的任何颜色。我没有尝试过，但我希望它有效！如果它不起作用，则为每个 li 添加类。

<nav class="navbar navbar-custom">
    <div class="container">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-spacer"></div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="first"><a href="/">Home</a></li>
                    <li class="dropdown ">
                        <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
                        <ul class="dropdown-menu text-danger">
                            <li><a href="link1-1.htm">Item 1-1</a></li>
                            <li><a href="link1-2.htm">Item 1-2</a></li>
                            <li><a href="link1-3.htm">Item 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="link2.htm">Item 2</a></li>
                    <li><a href="link3.htm">Item 3</a></li>
                    <li><a href="link4.htm">Item 4</a></li> 
                </ul>
            </div>
        </div>
    </div>
</nav>