twitter-bootstrap Bootstrap 3 导航栏 - 不能正确折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21559847/
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 3 Navbar - Doesn't collapse properly
提问by John_Nil
The navbar worked properly once but i made some changes and it no longer works. When I make the window small the toggle square shows up but when i click on it - nothing happens.
导航栏正常工作一次，但我做了一些更改，它不再工作。当我将窗口变小时，切换方块会显示出来，但是当我点击它时 - 没有任何反应。
Note: The navbar works fine in full screen - its just in small windows, when I click on the toggle button - the drop down menu doesn't appear
注意：导航栏在全屏模式下工作正常——它只是在小窗口中，当我点击切换按钮时——下拉菜单没有出现
Was wondering if anyone knew how to fix it.
想知道是否有人知道如何解决它。
Here is my code for the header :
这是我的标题代码：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">CHRONOS LOGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<li><a href="#">Google+</a></li>
<li class="divider"></li>
<li><a href="#">Facebook</a></li>
<li class="divider"></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
FOOTER:
页脚：
<button type="submit" name="submit" id="submit"
class="btn btn-primary btn-lg">
Submit
</button>
</form>
</div>
<?php } ?>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="regform/js/jquery.validate.js"></script>
<script src="regform/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function() {
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
采纳答案by Natsu
You have the wrong value on the data-targetattribute; it should instead be:
您的data-target属性值错误；它应该是：
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>
回答by Natsu
This is most likely a js problem as the code looks fine. Make sure that you have the bootstrap.min.js file in the header or at the bottom of the js header stack (under all the other js files).
这很可能是 js 问题，因为代码看起来不错。确保在头文件中或在 js 头文件堆栈的底部（在所有其他 js 文件下）有 bootstrap.min.js 文件。
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
For a further inspection, please update your question with the header code or a link to the site
如需进一步检查，请使用标题代码或网站链接更新您的问题
