1

我正在使用 twitter bootstrap 和 angularjs 创建一个简单的 Web 应用程序。当我创建下拉列表时，它没有在下面创建它，我给出了我添加文件的顺序

<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/style.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/font-awesome-ie7.min.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/angular-ui.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/angular-ui.min.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/select2/select2.css">

<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/bootstrap.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/bootstrap.min.js"></script>

`

<script type="text/javascript" src="${rc.getContextPath()}/resources/js/angular-ui.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/angular-strap.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/select2/select2.js"></script>

在萤火虫中，我可以看到加载文件的顺序相同，而不是为什么引导下拉菜单不起作用？

这就是我创建它的方式

<div style="margin: 0;" class="btn-toolbar">
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Danger <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
        </div>
    <div>
4

1 回答 1

1

我在使用下拉菜单时遇到了角带导航栏的问题。我在 html 文件的顶部添加了几行，下拉菜单开始工作：

    <link rel="stylesheet" href="l/vendor/bootstrap.min.css">
    <script src="l/vendor/bootstrap.min.js"></script>

我看到的症状是下拉菜单出现在导航栏中，但单击时没有“下拉”。更改 html 以包含上述行修复了该问题。我原以为它只适用于角带，但是，不。

顺便说一句，这是我的导航栏代码：

<div class="row navigation">
        <div class="navbar navbar-default" role="navigation" bs-navbar>
          <div class="navbar-header">
            <a class="navbar-brand" href="#/">Home</a>
          </div>
          <ul class="nav navbar-nav">
            <li data-match-route="/api"><a href="#/api">Api</a></li>
            <li data-match-route="/stream"><a href="#/stream">Stream</a></li>
            <li bs-dropdown class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li data-match-route="/api"><a href="#api">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li data-match-route="/other"><a href="#/other">Other</a></li>
          </ul>
          <ul class="nav pull-right">
            <li data-match-route="/login"><a href="#/login">Login</a></li>
          </ul>
        </div>
      </div>
</div>
于 2014-03-26T15:36:29.220 回答