Question

我正在尝试使用bootstrap导航栏，当屏幕尺寸减小时它会折叠，但是当我点击它时它不起作用（菜单没有出现）。这是我的HTML

    <div class="nav-holder">
  <div ng-controller="NavbarCtrl">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">MENU</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
          <div ng-repeat="menu in menus">
            <ul class="nav navbar-nav menu-group">
              <li ng-if="!hasSubMenus(menu)">
                <a ui-sref="{{menu.state}}">{{menu.title}}</a>
              </li>
              <li class="dropdown" ng-if="hasSubMenus(menu)">
                <a href="#" class="dropdown-toggle"
                   data-toggle="dropdown"
                   role="button"
                   aria-haspopup="true"
                   aria-expanded="false">{{menu.title}}<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li ng-repeat="subMenu in menu.subMenus">
                    <a ui-sref="{{subMenu.state}}">{{subMenu.title}}</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

这是我的文件：

.nav-holder {
  text-align: left;
  .menu-group {
    margin-left: 7%;
  }
}

这是我的代码以及jsfiddle中的angular：

https://jsfiddle.net/suryaSharma/3e8hkys9/

Answer 1

打开和关闭菜单项需要bootstrap.js和bootstrap.js需要jquery.js。所以，添加jquery.js文件。

你可以打开控制台并检查它。

错误：Bootstrap的JavaScript需要jQuery

- 编辑 -

这是更新的jsFiddle。

更新代码以使其正常工作。

<div class="nav-holder" ng-app="fsdoApp"> // missing ng-app

</div>

angular.module('fsdoApp', []) // missing [] for initiating module

Answer 2

这发生在我身上：http://v1.2-alpha.joshmurray.eu/

我采取了哪些措施来解决这个问题......只需确保icon-bar班级不透明，因为当我编辑navbar和{时{1}}我希望有一个透明的背景，所以我完成了：

navbar-default

这使得一切都变得透明，除了链接和东西。

这是我的CSS用于修复我的问题＆＃39;隐藏＆＃39; Bootstrap 3.3.6 ：
navbar-default { background-color: transparent; }
icon-bar

请务必将其添加到.icon-bar { background-color: white; }中，如下所示：

<head>

或使用外部样式表，如下所示：

<html> <head> <title>My Document - hidden icon-bar</title> <style> .icon-bar { background-color: white; } </style> </head> </html>

Bootstrap导航栏图标栏无效

2 个答案: