我有一个带有css媒体查询的boostrap导航栏，当屏幕低于一定大小时（对于移动设备），可以将其折叠并通过汉堡按钮使其可打开 . 但是，我的导航栏中还有一个下拉菜单，当导航栏全屏展开时工作正常但是当我从导航栏的汉堡版本打开它时，下拉菜单中的按钮不会显示 .
宽屏幕 - NAVBAR DROP DOWN工作精细：
NARROW SCREEN（汉堡包） - DROPDOWN菜单按钮不显示：
以下是Navbar的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="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</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="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">What is tSotRH?</a></li>
<li><a href="#">About Me</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;
}
}
这是我的Navbar的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 回答
工作正常但锚颜色与背景相同，你必须使用类来改变颜色和媒体屏幕或者在移动设备上使用默认的引导颜色（灰色）