twitter-bootstrap 切换按钮折叠在 Bootstrap 导航栏中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26770164/
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
Toggle button collapse not working in Bootstrap navbar
提问by James Howley
My toggle button is not working when the navbar collapses. I have checked the data-target several times and looks ok.
当导航栏折叠时，我的切换按钮不起作用。我已经多次检查了数据目标，看起来还不错。
Here is my code:
这是我的代码：
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="The Title">
<img style="max-width:100px;" src="images/LOGO-4.png">
</a>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">WORK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
Does anybody know what the problem is and how I can fix it?
有谁知道问题是什么以及我如何解决它？
采纳答案by Prasanth Louis
Of course your toggle button will differ based on your screen resolution. Try something along the lines of:
当然，您的切换按钮会根据您的屏幕分辨率而有所不同。尝试以下方法：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="The Title">
<img style="max-width:100px;" src="images/LOGO-4.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">WORK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Try this out on your mobile and see. Afterwards go into your css file and set the properties for screen size on WHEN should the toggle button appear to be. The toggle button might not appear on the desktop until you change these properties, or resize your browser window smaller, and smaller until the toggle button appears.
在您的手机上试试这个，看看。然后进入您的 css 文件并设置屏幕大小的属性，如果切换按钮出现在 WHEN 上。在您更改这些属性之前，切换按钮可能不会出现在桌面上，或者将浏览器窗口调整得更小，直到切换按钮出现为止。
Eg. Maximized on my browser window, the toggle button doesn't appear.
However if you resize your browser window by half(or if you're surfing on a phone), it'll look like this
例如。在我的浏览器窗口中最大化，不会出现切换按钮。
但是，如果您将浏览器窗口大小调整一半（或者如果您在手机上冲浪），它看起来像这样
To fix this you'll need to go into your css settings. But this is ONLY if you want to change it. Otherwise it'll work fine.
要解决此问题，您需要进入 css 设置。但这仅在您想更改它时才适用。否则它会正常工作。
回答by Miomir Dancevic
See that you have correct import of library, i hade a same problem, i dont why sometimes it has strange behavior with different version of Jquery
看到您正确导入了库，我遇到了同样的问题，我不明白为什么有时使用不同版本的 Jquery 会出现奇怪的行为
Try this
试试这个
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
回答by Anna Chen
Hope it will help because I had the same problem and fixed it by this:
希望它会有所帮助，因为我遇到了同样的问题并通过以下方式修复了它：
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
回答by user4986178
Default navbar - Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
如果禁用 JavaScript 并且视口足够窄以致导航栏折叠，则无法展开导航栏并查看 .navbar-collapse 中的内容。
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
响应式导航栏要求在您的 Bootstrap 版本中包含折叠插件
回答by Vijay
Every time we are facing this problem "why is navbar-toggle button not working?", but this time we have found the solution and specially thanks for google chrome developer team for developed showing error clearly.
每次我们遇到这个问题“为什么导航栏切换按钮不起作用？”，但这次我们找到了解决方案，特别感谢谷歌浏览器开发团队开发的清晰显示错误。
We should include jquery library file before bootstrap javascript file.
我们应该在引导 javascript 文件之前包含 jquery 库文件。
