html - Bootstrap 导航栏中的下拉菜单

Question

我正在尝试 this带有下拉菜单的导航栏。当我尝试将其构建到我的网络服务中时，我无法使用下拉菜单。我可以点击它，但那里没有任何反应。这是我当前的设置:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
     <nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
        <div class="container-fluid">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Foo</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bar<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Foo</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Bar</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Baz</a></li>
                </ul>
              </li>
              <li><a href="#">Baz</a></li>
            </ul>
          </div>
        </div>
      </nav>

导航栏看起来正确并且样式与文档中的一样，但是没有任何点被下拉。

Answer 1

添加 J 查询和 Bootstrap 文件

删除这个类 collapse

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
     <nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
        <div class="container-fluid">
          <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Foo</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bar<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Foo</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Bar</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Baz</a></li>
                </ul>
              </li>
              <li><a href="#">Baz</a></li>
            </ul>
          </div>
        </div>
      </nav>