0
我有一个带有CSS媒体查询的boostrap导航栏,可将其折叠并在屏幕低于特定尺寸时通过汉堡按钮打开它(适用于移动设备)。但是,我的导航栏中还有一个下拉菜单,当导航栏全屏展开时正常工作,但当我从导航栏的汉堡版中打开它时,下拉菜单中的按钮不显示。Bootstrap导航栏下拉菜单按钮在导航栏处于折叠状态的汉堡包时不显示
下面是为导航栏的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;
}
}
这是我的导航栏的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;
}
任何帮助是非常赞赏,为什么当菜单从与汉堡按钮collaped(也拉开了导航栏的下拉按钮不显示,我意识到它很可能会是一个非常愚蠢和简单的错误,但我找不到)
如果喜欢,你必须张贴问题之前,先检查元素! –