twitter-bootstrap Bootstrap 导航栏切换按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27930160/
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 not working
提问by Nikasv
When I shrink the window and click the button it doesn't work. Button doesn't respond. What seems to be the problem here could anyone tell me please?
当我缩小窗口并单击按钮时，它不起作用。按钮没有反应。这里似乎有什么问题，有人可以告诉我吗？
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="">Page 1</a>
</li>
<li>
<a href="">Page 2</a>
</li>
<li>
<a href="">Page 3</a>
</li>
</ul>
Libraries are jQuery 2.1.3 and bootstrap 3.3.1.
库是 jQuery 2.1.3 和 bootstrap 3.3.1。
采纳答案by Denise
Your code looks great, the only thing i see is that you did not include the collapsed class in your button selector. http://www.bootply.com/cpHugxg2f8Note: 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.
您的代码看起来很棒，我唯一看到的是您没有在按钮选择器中包含折叠类。http://www.bootply.com/cpHugxg2f8注意：需要 JavaScript 插件 如果 JavaScript 被禁用并且视口足够窄以至于导航栏折叠，将无法展开导航栏并查看 .navbar-collapse 内的内容。
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
响应式导航栏要求在您的 Bootstrap 版本中包含折叠插件。
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<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><a href="">Page 1</a>
</li>
<li><a href="">Page 2</a>
</li>
<li><a href="">Page 3</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
回答by indubitablee
Demo: http://jsfiddle.net/u1s62Lj8/1/
演示：http: //jsfiddle.net/u1s62Lj8/1/
You need the jquery and boostrap javascript files included in your html page for the toggle to work.
您需要 html 页面中包含的 jquery 和 boostrap javascript 文件才能使切换正常工作。
<html>
<head>
// stylesheets here
<link rel="stylesheet" href=""/>
</head>
<body>
//your html code here
// js scripts here
// note jquery tag has to go before boostrap
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
回答by Alberto
Remember load jquery before bootstrap js
记住在 bootstrap js 之前加载 jquery
回答by Syntaxx Errorr
If you will change the ID then Toggle will not working same problem was with me i just change
如果您将更改 ID，则切换将无法正常工作与我相同的问题，我只是更改
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
id="defaultNavbar1" then toggle is working
id="defaultNavbar1" 然后切换工作
