我在我的网站上使用twitter Bootstrap,它上面有一个固定的导航栏.当我在桌面浏览器中调整窗口大小时,一切都很好.当我在移动设备上打开同一个网站时,我可以看到navbar-brand而不是切换按钮.我发布截图以便更好地理解(第一个是桌面firefox,第二个是
android)：
这真让我抓狂！！代码：
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hidden-nav">
<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 scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links,forms,and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class="scroll-link" data-id="slides">Home</a></li>
<li><a href="#" class="scroll-link" data-id="about">Agency</a></li>
<li><a href="#" class="scroll-link" data-id="capabilities">Capabilities</a></li>
<li><a href="#" class="scroll-link" data-id="projects">Projects</a></li>
<li><a href="#" class="scroll-link" data-id="clients">Clients</a></li>
<li><a href="#" class="scroll-link" data-id="contact">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
和css：
.navbar-floating{
background:black;
color:#5b5656;
width:100%;
border-radius:0;
}
.navbar-floating .navbar-brand{
color:#810000;
font-size:20px;
text-transform:uppercase;
}
.navbar-floating .navbar-brand:after{
content:' | ';
color:#810000;
position:relative;
top:-3px;
}
#floating-nav{
position:fixed;
display:none;
top:0;
width:100%;
height:50px;
}
#floating-nav.navbar{
min-height:1px;
}
#floating-nav ul li a{
font-size:20px;
}
#floating-nav ul li a:hover{
background:none;
}
我究竟做错了什么？任何帮助深表感谢.这是演示网址,如果你想看看：http://goo.gl/Watbqk
解决方法
只需将navbar-default添加到ul类上方的div类即可
<div class="collapse navbar-collapse navbar-default" id="hidden-nav"> <ul class="nav navbar-nav">