Bootstrap 折叠导航栏不展开

Question

我是 Bootstrap 的新手，只是想让折叠的下拉导航栏正常运行。它完美地调整大小，一直到窗口太小以至于它触发所有导航栏项目被删除并放置在小数据切换按钮内。因为当我单击那个 lil’ 数据切换按钮时，它不会像预期的那样展开并显示下拉列表中的项目。

 <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>

我在所有页面上都使用了这个相同的代码，但是由于某种原因它只适用于本网站的主页。主页和其他页面之间的唯一区别是在 <nav> 标签下还有另一个包含该页面正文和图像的内容 div。也就是说，当我从我的页面中删除这个 div 的整个代码时，问题仍然存在，所以我不认为它……

我也可能（过度）使用冗余类，但那是以后的故事……

原文由 kaifresh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用了相同的代码并且运行良好，请查看 http://jsbin.com/henume/2/edit?html,output

您提到它可以正确调整大小，所以我假设 bootstrap.css 正在运行。请确保页面中包含 jQuery.js 和 boostrap.js。

原文由 nasirkhan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

大多数时候，这是因为 jQuery 没有正确链接到页面。或者在jQuery.js之前引用了bootstrap.js。确保您正确链接了这些链接。

原文由 Sherman Szeto 发布，翻译遵循 CC BY-SA 3.0 许可协议