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，其中包含该页面的主要文本和＆amp;一个图像。也就是说，当我从我的页面中删除这个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所提到的，代码在live domain上完美运行。有时这个问题可能只是由我的案例中的本地域名引起的，同样的代码在现场网站上得到了很好的渲染。

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，就像我的教程一样。猜猜新版本发生了一些变化。

Bootstrap折叠导航栏没有扩展

6 个答案: