Question

我正在使用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>

在firebug中，我可以看到相同顺序的文件被加载而不是为什么bootstrap下拉不起作用的问题？

这就是我创造它的方式

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

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

Twitter Bootstrap下拉不使用angularJs

1 个答案: