twitter-bootstrap 点击后导航栏折叠不会随着下拉菜单展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18976460/
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
Navbar collapse not expanding with dropdown after clicking on it
提问by Bharadwaj Srigiriraju
So, I have just started using Bootstrap 3, and I want my header to be fixed at the top, content in it vertically aligned with the content in body, and lastly, responsive.
所以，我刚刚开始使用 Bootstrap 3，我希望我的标题固定在顶部，其中的内容与正文中的内容垂直对齐，最后，响应式。
Everything works fine except that clicking on collapsed navbar doesn't seem to work. Clicking on those small icon with three bars one over other doesn't show me my list below.
一切正常，只是点击折叠的导航栏似乎不起作用。单击那些带有三个横杠的小图标并没有显示我下面的列表。
I know this could be a very basic mistake but clicking on this kid right here, doesn't work:
我知道这可能是一个非常基本的错误，但是在这里点击这个孩子，不起作用：
I think I might be doing something wrong with classes in my header.
我想我的标题中的类可能有问题。
This is my code:
这是我的代码：
<header class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Logo Text</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#" > My Account </a> </li><br>
<li> <a href="#"> Logout </a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
The only thing I have in my custom css is:
我的自定义 css 中唯一的东西是：
@media (min-width: 980px){
body{
padding-top: 70px;
}
}
but I don't think that would be causing this problem.
但我认为这不会导致这个问题。
The things I have included before my header in my html are:
我在 html 中的标题之前包含的内容是：
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">
which are all in my local directory.
这些都在我的本地目录中。
Searching for "collapse not working"/"collapse click not working" shows me bunch of results which seem to be related to the problem of this icon itself not showing up.
搜索“折叠不起作用”/“折叠点击不起作用”向我展示了一堆结果，这些结果似乎与此图标本身未显示的问题有关。
Including collapse.js that came with bootstrap didn't fix this problem either.
包括 bootstrap 附带的 collapse.js 也没有解决这个问题。
回答by Bass Jobsen
Collapsing of the navbar uses the collapse plugin, see: http://getbootstrap.com/javascript/#collapse. So add data-toggle="collapse" and a data-target to your navbar button. And add the same class as used for data-target to the nav element of your navbar:
导航栏的折叠使用折叠插件，请参阅：http: //getbootstrap.com/javascript/#collapse。因此，将 data-toggle="collapse" 和 data-target 添加到您的导航栏按钮。并将与 data-target 相同的类添加到导航栏的导航元素：
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
and:
和：
<nav class="collapse navbar-collapse" role="navigation">
More about Migratingfrom Bootstrap v3 to Bootstrap v4 here in docs.
回答by Brady Spiva
For others who will get here from a web search:
对于将通过网络搜索到达这里的其他人：
I had this same problem - not being able to expand a navbar - but all of my code was fine. If you've checked your data-toggleper @Bass Jobsen's answer, and are still having issues then check your CDN.
我遇到了同样的问题 - 无法扩展导航栏 - 但我的所有代码都很好。如果您已data-toggle根据@Bass Jobsen的回答检查过您的答案，但仍有问题，请检查您的 CDN。
My problem was that I had a network-level ad blockerthat was blocking some of my CDN'ed scripts.
我的问题是我有一个网络级广告拦截器，它拦截了我的一些 CDN 脚本。
Facepalm.
面掌。
