twitter-bootstrap bootstrap 导航栏切换按钮在移动设备中不可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22284788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap navbar toggle button is not visible in mobile
提问by Samia Ruponti
I am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brandbut not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
我正在为我的网站使用 twitter Bootstrap，它的顶部有一个固定的导航栏。当我在桌面浏览器中调整窗口大小时，一切正常。当我在移动设备上打开同一个网站时，我可以看到navbar-brand但看不到切换按钮。我发布截图以便更好地理解（第一个是桌面 Firefox，第二个是 android）：
This is driving me crazy!!!
这真让我抓狂！！！
The Code:
代码：
.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>What am I doing wrong? Any help is much appreciated.
我究竟做错了什么？任何帮助深表感谢。
回答by AndrewL64
Just add a navbar-defaultclass to the div wrapping your <ul>element like this:
只需将导航栏默认类添加到包装<ul>元素的 div 中，如下所示：
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
回答by John
Try using .navbar-darkas
尝试使用.navbar-dark作为
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
回答by Felisane Elanio Sérgio
It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}
它在你的引导 css 里面。它默认定义为隐藏在 md 上。你所要做的就是在你的样式页面中创建一个新行。.navbar-expand-md .navbar-toggler{display: block !important;}
