javascript – bootstrap导航栏切换按钮在移动设备中不可见

我在我的网站上使用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">

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...