微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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">

原文地址:https://www.jb51.cc/js/150239.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐