[英]bootstrap navbar toggle button is not visible in mobile
我正在为我的网站使用 twitter Bootstrap,它的顶部有一个固定的导航栏。 当我在桌面浏览器中调整窗口大小时,一切都很好。 当我在移动设备上打开同一个网站时,我可以看到navbar-brand
但看不到切换按钮。 我发布截图以便更好地理解(第一个是桌面 Firefox,第二个是 android):
这真让我抓狂!!!
编码:
.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; }
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css"> <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> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
我究竟做错了什么? 任何帮助深表感谢。
只需将导航栏默认类添加到包装<ul>
元素的 div 中,如下所示:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
尝试使用.navbar-dark
作为
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
它在你的引导 css 里面。 它默认定义为隐藏在 md 上。 你所要做的就是在你的样式页面中创建一个新行。 .navbar-expand-md .navbar-toggler{display: block !important;}
对我来说,解决方案真的很烦人
将<nav class=
navbar-expand-sm
更改为navbar-expand-lg
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.