我有一个bootstrap导航栏，带有一个css媒体查询，当屏幕低于一定大小时（对于移动的设备），可以折叠它并通过汉堡按钮打开它。但是，我也有一个下拉菜单，当导航栏全屏展开时，它工作正常，但是当我从汉堡版的导航栏打开它时，下拉菜单中的按钮不显示。
宽屏幕-导航条下拉工作正常：[！[宽屏-导航条下拉功能正常][1]][1]
窄屏幕（汉堡包）-下拉菜单按钮不显示：[！[窄屏幕（汉堡包）-下拉菜单按钮不显示][2]][2]
下面是导航栏的html代码：
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="Blog v.0.html#postWelcome"> Blog </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" id="home"><a href="Blog v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">What is this Blog?</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a>
<ul class="dropdown-menu pinkBackground">
<li><a style="color:#062F4F" href="#">Stream 1</a></li>
<li><a style="color:#062F4F" href="#">Stream 2</a></li>
<li><a style="color:#062F4F" href="#">Stream 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>这是折叠导航栏的CSS媒体查询：
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}这是我的导航栏的CSS代码：
.navbar-default {
z-index: 1;
background-color: #062F4F;
border-color: #062F4F;
}
/* title */
.navbar-default .navbar-brand {
color: #FFFFFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #813772;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #813772;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #813772;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #FFFFFF;
background-color: #062F4F;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}任何帮助是非常感谢为什么导航栏下拉按钮不显示菜单时，从折叠与汉堡包按钮打开（也，我意识到这可能是一个相当愚蠢和简单的错误，但我找不到它）
1条答案
按热度按时间643ylb081#
这工作正常，但锚颜色是相同的背景，你必须使用类，并改变颜色与媒体屏幕或让默认引导颜色在移动的（灰色）