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

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 class 就足够了，例如.navbar-nav .dropdown-menu>li>a - 你不想让它太具体，因为如果你想在将来再次覆盖它，它会变得更加困难。

工作示例（除了我删除了折叠 class 所以我们可以在代码段中看到它）

@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

添加 class“text-danger”或您喜欢的任何颜色。我没有尝试过，但我希望它有效！如果它不起作用，则将 class 添加到每个 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>

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

Change color of font in dropdown of bootstrap navbar when collapsed

css

twitter-bootstrap

twitter-bootstrap-3