Question

如何更改在移动模式下单击切换后显示的列表颜色（响应）。目前它是透明的。我应该定位哪个div来更改单击切换后显示的下拉列表以更改下拉列表的背景颜色。请帮助我，我是bootstrap的新手。如果您需要检查我的输出，请告诉我。

.navbar-inverse {
  background: #E0FFFF;
  border: none;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: black;
  background: #13B1CD;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background: #13B1CD;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  background-color: #13B1CD;
  color: white;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
  background-color: white;
  color:#13B1CD;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color:white;
  /* I have just used it to change the  regular toggle color */
}
.navbar-inverse .navbar-toggle .icon-bar :hover { /*Not working */
  background-color:white;
}
.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {   /* This i haved used to change the hover of dropdown menu*/
  background:white;
  color:white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation" style="background-color:white;border:none;color:black;height:90px;">
    <div class="container" style="font-family:Century Gothic, sans-serif; margin-top:18px;">
        <div class="navbar-header">
            <button style="background-color:#13B1CD" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <!-- data-target is used to target line 43 navbar-->
                <span class="sr-only">Toggle navigation</span>
                <!--Toogle navigation  cannot be seen due to sr-only,it is only used tell users that this part is toggle navigation,only programmers it is usable-->
                <span class="icon-bar"></span>
                <!-- Writing this span tag three times to produce three lines in toggle button that is used in small screen-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand"> <img src="https://sampletrunk.com/assets2/img/Slicing/Logo.png" /></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" style="color:black;">
                <li><a href="#"><span class="glyphicon glyphicon-home"
                         aria-hidden="true"> </span><b> Home</b></a></li>
                <li><a href="#aboutus"><b>About Us</b></a></li>
                <li><a href="#products"><b>Products</b></a></li>
                <li><a href="#services"><b>Services</b></a></li>
                <li><a href="#awards"><b>Awards</b></a></li>
                <li><a href="#contacts"><b>Contacts</b></a></li>
                <li><a href="#careers"><b>Careers</b></a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

如果我理解正确，您只需添加此css代码即可为您的列表添加彩色背景：

  #navbar > ul {
    background-color:#eee; /*choose the color code you prefer, just an example*/
  }

或者我错过/误解了什么？

Answer 2

只需在媒体查询的.navbar-nav中设置背景

即可

.navbar-inverse {
  background: #E0FFFF;
  border: none;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: black;
  background: #13B1CD;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background: #13B1CD;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  background-color: #13B1CD;
  color: white;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
  background-color: white;
  color:#13B1CD;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color:white;
  /* I have just used it to change the  regular toggle color */
}
.navbar-inverse .navbar-toggle .icon-bar :hover { /*Not working */
  background-color:white;
}
.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {   /* This i haved used to change the hover of dropdown menu*/
  background:white;
  color:white;
}

@media (max-width:767px) {
  .navbar-nav {
    background: #333;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation" style="background-color:white;border:none;color:black;height:90px;">
    <div class="container" style="font-family:Century Gothic, sans-serif; margin-top:18px;">
        <div class="navbar-header">
            <button style="background-color:#13B1CD" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <!-- data-target is used to target line 43 navbar-->
                <span class="sr-only">Toggle navigation</span>
                <!--Toogle navigation  cannot be seen due to sr-only,it is only used tell users that this part is toggle navigation,only programmers it is usable-->
                <span class="icon-bar"></span>
                <!-- Writing this span tag three times to produce three lines in toggle button that is used in small screen-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand"> <img src="https://sampletrunk.com/assets2/img/Slicing/Logo.png" /></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" style="color:black;">
                <li><a href="#"><span class="glyphicon glyphicon-home"
                         aria-hidden="true"> </span><b> Home</b></a></li>
                <li><a href="#aboutus"><b>About Us</b></a></li>
                <li><a href="#products"><b>Products</b></a></li>
                <li><a href="#services"><b>Services</b></a></li>
                <li><a href="#awards"><b>Awards</b></a></li>
                <li><a href="#contacts"><b>Contacts</b></a></li>
                <li><a href="#careers"><b>Careers</b></a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 3

您只需要在css类上应用您的更改

.navbar-inverse .navbar-collapse {
    background-color: whatever-you-need;
    color: here-a-color;
}

如果您只需要在移动视图上应用更改，请

或应用媒体查询。

例如

@media(max-width: your-width) {
    .navbar-inverse .navbar-collapse {
       background-color: #your-color;
       color: #your-color;
    }
  }

单击切换后，如何在移动模式下更改导航栏的背景颜色？

3 个答案: