Question

我正在进行我的第一个引导程序项目，我在修改导航栏时遇到了一些困难，我花了几个小时进行研究，但我特别关注一个项目。单击时，下图中圈出的列表项将标准引导程序变为灰色，我希望它与背景颜色匹配，黑色。

虽然我问我也想改变下拉菜单的颜色。

这是我的标记：

    <nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#"  class="navbar-brand">
                <img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"></img>
            </a>
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="#">Suspension Kits</a></li>
                            <li><a href="#">Light Bar Mounts</a></li>
                            <li><a href="#">Custom Fabrication</a></li>
                        </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="#">Tacoma</a></li>
                            <li><a href="#">Bronco</a></li>
                            <li><a href="#">Hot Rods</a></li>
                            <li><a href="#">Everything Else</a></li>
                        </ul>
                </li>
                            <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您可能希望更改焦点上的标签颜色。下拉样式由.dropdown-menu类及其后代类控制。

.navbar-default .navbar-nav > .open > a:focus {
  background: #000 !important; /* Avoid !important, added for the sake of SO snippet priority */
  color: #fff !important;
}
.dropdown-menu {
  background: lightblue !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
        <img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px">
      </a>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="#">Suspension Kits</a>
            </li>
            <li><a href="#">Light Bar Mounts</a>
            </li>
            <li><a href="#">Custom Fabrication</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
          <ul role="menu" class="dropdown-menu">
            <li><a href="#">Tacoma</a>
            </li>
            <li><a href="#">Bronco</a>
            </li>
            <li><a href="#">Hot Rods</a>
            </li>
            <li><a href="#">Everything Else</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

自定义Bootstrap Navbar选项卡颜色

1 个答案: