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的整个代码时,问题仍然存在,所以我不认为它......

我也可能(过度)使用冗余类,但这是一个故事,以后......

Answer 1

对于 >5，您必须对按钮使用“data-bs-target”而不是“data-target”。

这：

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

代替：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

Answer 2

大部分时间,因为jQuery没有正确链接到页面.或者在jQuery.js之前引用bootstrap.js.确保正确链接.

Answer 3

我使用了相同的代码并且工作正常,请访问http://jsbin.com/henume/2/edit?html,output

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