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

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

Answer 2

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

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

Answer 3

正如 nasirkhan 所提到的，代码在实时域上运行良好。有时这个问题可能是由本地域名引起的，就像我的情况一样，并且相同的代码在实时站点上渲染得很好。

Answer 4

我遇到了同样的问题，请确认您包含这两个文件。 第一个用于 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>

Answer 5

添加这三行对我有帮助。

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

Answer 6

我使用的是 bootstrap@5.0.2 而不是 4.6.0，就像在我的教程中一样。 猜猜在新版本中情况发生了变化。

Answer 7

对于 >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">