无法让twitter bootstrap navbar工作？

Question

我查看过一堆教程，我在这里阅读了一堆问题的答案。我无法弄清楚发生了什么。我按顺序链接到bootstrap.css，bootstrap-responsive.css，bootstrap.js，jquery和bootstrap-dropdown.js。当我从页面源中单击每个时，它会正确显示。但是，当我单击下拉列表时，没有任何反应。这是html代码：

<!--begin bootstrap navbar-->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="/signup/index">Sign Up</a></li>
                <li class="dropdown">
                    <a href="/signup/index" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                         <li><a href="/mypage">my page</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--/end bootstrap navbar-->

如果有人有任何想法，请告诉我。

Answer 1

一个非常常见的问题是您加载javascript文件的顺序。你必须在bootstrap javascript文件之前加载jquery。 CSS文件顺序无关紧要。

修改

当我复制粘贴你的代码并将此行中的href从“/ signup / index”更改为“＃”时，它有效...

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

请参阅...

通过点击（而不是悬停）激活Bootstrap菜单，如果链接实际上在某处，它将跳过放下菜单并导航。

Answer 2

您应该只链接EITHER bootstrap.js或bootstrap-dropdown.js。显然，它可能会产生一些冲突，因为这是我唯一需要改变的地方。不过，我之前没有遇到任何问题。

Answer 3

我有一个类似的问题，当我点击它时，导航栏下拉列表不会做出反应。我试图将http://twitter.github.io/bootstrap/examples/starter-template.html用于我的设计。

最终缺少jquery.js的问题。

这是寻找jquery.js的代码片段。

<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>

在我将丢失的jquery.js复制到正确的文件夹后，一切正常。

Answer 4

带反应的Bootstrap Nav-Bar模板：

类似的问题与移动视图下拉而不是单击下拉列表。我从w3c中删除了缺少的行... ajax丢失了。：

参考____ https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

您的HTML标题下面的代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <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>