Question

Bootstrap新手并创建基本导航栏。我希望我需要的东西是有道理的。简而言之，我需要下拉菜单中列表项的背景颜色和文本颜色，以便在它们崩溃之前和之后匹配。我似乎无法找到正确的CSS属性进行编辑，我尝试过的许多组合都无法解决我的问题。 A similar question没有解决我的问题，但也许值得为别人寻找。

下面是折叠前菜单的样子。每个<li>都有一个链接或<a>（请参阅下面的基本HTML）。文本颜色为黑色，背景颜色为白色。当项目悬停时，<li>的背景变为棕褐色。菜单崩溃后我想要相同的颜色：

Pre-Collapse

崩溃后，它看起来像这样：

Post-Collapse

折叠后，颜色似乎会变回Bootstrap的默认值。我希望 Sub 1 和 Sub 3 的文字默认为黑色，背景为白色，同时保持标题后面的颜色， Stuff 2 ，同样的。单击或悬停时颜色似乎正常（棕色背景为黑色字体）。

以下是一些相关的HTML和CSS。我知道其中一些是混乱的（并且!important;的使用通常被认为是不好的形式），但我希望那里的人可以帮助我识别代码块，这样我就可以让它工作然后专注于清理它。

基本HTML：

<nav class="navbar navbar-inverse">
  <div id="navbarbg" class="container-fluid">
    <div id="rbgnavbar" class="container">    
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a id="logo" class="pull-left" href="http://www.redbuttegarden.org"><img src="images/logo.png" alt="Red Butte Garden"></a>
        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

          <ul class="nav navbar-nav">

            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 1 <span class="caret"></span></span></a>
              <ul class="dropdown-menu">
              </ul>
            </li>

            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 2 <span class="caret"></span></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 3 <span class="caret"></span></span></a>
              <ul class="dropdown-menu">
              </ul>
            </li>
          </ul>
        </div>
    </div>
  </div>
</nav>

基本CSS：

#rbgnavbar a:hover, a, li, .dropdown-menu li:hover {
    color: #000000;
}

.dropdown-menu li:hover {
    background-color: #F2EDE4;
    color: #000000;
}

/* Main dropdown menu items change cover when selected/clicked */
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
    background-color: #196143 !important;
}

.dropdown-menu li, .dropdown-menu a {
    text-align: center;
    color: #000000;
}

.dropdown {
    font-size: 10px;
    padding: 0;
    font-weight: bold;
}

#rbgnavbar {
    max-width: 1400px;
    margin-left:auto;
    margin-right:auto;
    background-color:#00502F;
}


.rbgwhitelink {
    color: #FFFFFF;
}

.dropdown ul {
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 10px;
    font-weight: bold;
}

/* Border thickness and color between dropdown menu li, padding */
.dropdown-menu li {
    border-top: 2px double #D3D3D3;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Background color of li in navbar when hovered over */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li:hover {
    background-color: #F2EDE4;
}

/* Makes dropdown-menu li links bold*/
.dropdown-menu li > a, .dropdown-menu li > a:visited {
    font-weight: bold;
}

Answer 1

我建议使用媒体查询并添加要调整的类。例如：

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
  .dropdown-menu>li>a {
    background-color: #fff;
  }
    }

对于Bootstrap 3默认媒体查询，您可能会发现它here

Answer 2

经过一些实验，这样做了：

.dropdown-menu li {
    background-color: #FFFFFF;
}

.dropdown-menu li:hover {
    background-color: #F2EDE4;
}

.dropdown-menu li > a:hover {
    text-decoration: none;
}

/* Changes the color of link text <a> after navbar has collapsed for small screen or mobile mode */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited {
    color: #000000; 
}

Answer 3

我认为你必须改变这种颜色：

.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
    background-color: #196143 !important;
}

如何在菜单折叠后更改Bootstrap Navbar下拉菜单列表项的背景颜色和文本颜色

3 个答案: