Javascript Bootstrap 折叠导航栏未展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26699619/
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 collapsed navbar not expanding
提问by kaifresh
I'm new to Bootstrap and just trying to get the collapsed dropdown nav bar to behave. It resizes perfectly, all the way up to the point that the window is so small that it triggers all the nav bar items being removed and placed inside the little data-toggle button. Because when I click that lil' data-toggle button, it does not expand and show the items in a drop down list like its supposed to.
我是 Bootstrap 的新手，只是试图让折叠的下拉导航栏发挥作用。它完美地调整大小，一直到窗口非常小以至于它触发所有导航栏项目被删除并放置在小数据切换按钮内。因为当我点击那个小数据切换按钮时，它不会像它应该的那样展开并在下拉列表中显示项目。
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header logo">
<a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-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>
<div class="collapse navbar-collapse" id="nav-collapse">
<!-- Individual Navbar elements -->
<ul class="nav nav-justified nasti-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="divider"></li>
<li><a href="familylaw.html">Family Law</a></li>
<li class="divider"></li>
<li><a href="criminallaw.html">Criminal Law</a></li>
<li class="divider"></li>
<li><a href="conveyancing.html">Conveyancing</a></li>
<li class="divider"></li>
<li><a href="about.html">About</a></li>
<li class="divider"></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div> <!-- Container fluid-->
</nav>
I've used this identical code on all pages, however for some reason it only works on the home page of this site. The only difference between the home page and other pages is that beneath the <nav>tags there is another div of content containing the main text for that page & an image. That said, when I delete the entire code for this div from my page, the problem persists so I don't think its that....
我在所有页面上都使用了相同的代码，但是由于某种原因，它只适用于本网站的主页。主页和其他页面之间的唯一区别是，在<nav>标签下方有另一个 div 内容，其中包含该页面的主要文本和图像。也就是说，当我从我的页面中删除这个 div 的整个代码时，问题仍然存在，所以我不认为它......
I may also be (over)using redundant classes, but thats a story for later...
我也可能（过度）使用冗余类，但那是以后的故事......
回答by Sherman Szeto
Most of the time, its because jQuery isn't linked to the page correctly. Or bootstrap.js is referenced before jQuery.js. Make sure you have those linked correctly.
大多数时候，这是因为 jQuery 没有正确链接到页面。或者 bootstrap.js 在 jQuery.js 之前被引用。确保您已正确链接这些链接。
回答by nasirkhan
I used the same code and it is working perfectly, check at http://jsbin.com/henume/2/edit?html,output
我使用了相同的代码，它运行良好，请查看http://jsbin.com/henume/2/edit?html,output
You mentioned that it resizes properly, so i assume that the bootstrap.css is working. Please make sure the jQuery.js and boostrap.js are included in the page.
你提到它可以正确调整大小，所以我假设 bootstrap.css 正在工作。请确保页面中包含 jQuery.js 和 boostrap.js。
回答by Hammad Khan
As nasirkhan mentioned, the code is working perfectly on live domain. At times this issue can be caused by just the local domain name as was in my case and the same code was renderering fine on live site.
正如 nasirkhan 提到的，代码在实时域上运行良好。有时这个问题可能只是由本地域名引起的，就像我的情况一样，并且相同的代码在实时站点上渲染得很好。
回答by only4
I had the same problem, confirm that you are including these two files.
First one is for Bootstrap(css) and second one is for Bootstrap(javascript).
In my case included the css one correctly but you know what I did at the time of including second one I included is as a stylesheetbut it's a script.
我遇到了同样的问题，请确认您包含这两个文件。第一个用于 Bootstrap(css)，第二个用于 Bootstrap(javascript)。在我的例子中，正确地包含了 css 一个，但你知道我在包含第二个时我做了什么，stylesheet但它是一个脚本。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
回答by Ravi Kumar Mylavarapu
Addition of these three lines helped me.
添加这三行帮助了我。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
