Bootstrap 折叠导航栏不展开

Question

我是 Bootstrap 的新手，只是想让折叠的下拉导航栏正常运行。 它完美地调整大小，一直到 window 是如此之小以至于它触发所有导航栏项目被删除并放置在小数据切换按钮内。 因为当我单击那个 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

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

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

Answer 5

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

这三行的添加帮助了我。

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

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

Answer 8

我正在使用 Bootstrap 5.1 并且遇到了同样的问题。 只有在 body 标记结束之前没有对 bootstrap.js 文件的引用时才会发生这种情况。

Answer 9

将data-toggle更改为data-bs-toggle并将data-target更改为data-bs-target为我修复了它。 CSS 缓存是个谜，有时让我想知道我是什么时候做出重大改变的。 希望这可以帮助。