Question

我正在尝试使用下拉菜单this导航栏。当我尝试将其构建到我的web服务中时，我没有得到下拉列表。我可以点击它，但没有任何反应。这是我目前的设置：

<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查询＆amp;引导程序文件

删除此课程collapse

＆＃13;

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

＆＃13;

Answer 2

导航栏默认导航栏需要JavaScript插件

如果禁用了JavaScript并且视口足够窄以致导航栏崩溃，则无法展开导航栏并查看.navbar-collapse内的内容。

响应式导航栏需要将崩溃插件包含在您的Bootstrap版本中。

以下是插件：http://getbootstrap.com/javascript/#collapse

来自：http://getbootstrap.com/components/#navbar

Answer 3

因为您缺少响应式下拉列表

<强> HTML

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>

<强> DEMO HERE

bootstrap导航栏中的下拉列表

3 个答案: