【发布时间】：2015-01-05 13:48:11
【问题描述】：
我不熟悉使用引导程序并创建了以下导航栏。它折叠得很好，但是当我单击按钮时，我的链接都没有显示。我的项目中的凉亭组件文件夹中确实有 collapse.js。到目前为止，我已经尝试将 data-target 更改为 #navbar-collapse 并且只是简单的 navbar-collapse。这是我的代码：
<nav class="navbar navbar-inverse navbar-fixed-top" data-ng-include="'/system/views/header.html'" data-role="navigation">
<div data-ng-controller="HeaderController">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<div style="float:left; width: 40%;">
<ul style="text-align:right" class="nav navbar-nav">
<li><a href="#">events</a></li>
<li><a href="#">faq</a></li>
</ul>
</div>
<div style="float:left; width: 20%;">
<a ui-sref="home" mean-token="'site-title'"><img src="/system/assets/img/blacklogo.jpg" width="140" height="60"/></a>
</div>
<div style="float:left; width: 40%;">
<div style="float:left;">
<ul style="text-align:left" class="nav navbar-nav">
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li data-ng-hide="global.authenticated"><a href="#">tools</a></li>
</ul>
</div>
<div class="navbar-right">
<ul style="text-align:right" class="navbar-nav nav" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.login'>login</a></li>
</ul>
<ul style="text-align:right" class="navbar-nav nav" data-ng-show="global.authenticated">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{global.user.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/logout">Sign out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
更新 - 这是我的头文件，它主要是从 github 克隆平均项目然后使用 npm install 命令安装 bower 和其他东西的产品（对不起，如果这没有意义......我'我现在只使用 MEAN 堆栈大约一个月）：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{{appName}} - {{title}}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="keywords" content="node.js, express, mongoose, mongodb, angularjs, swig">
<meta name="description" content="MEAN - A Modern Stack: MongoDB, ExpressJS, AngularJS, NodeJS. (BONUS: Passport User Support).">
<meta property="fb:app_id" content="APP_ID">
<meta property="og:title" content="{{appName}} - {{title}}">
<meta property="og:description" content="MEAN - A Modern Stack: MongoDB, ExpressJS, AngularJS, NodeJS. (BONUS: Passport User Support).">
<meta property="og:type" content="website">
<meta property="og:url" content="APP_URL">
<meta property="og:image" content="APP_LOGO">
<meta property="og:site_name" content="MEAN - A Modern Stack">
<meta property="fb:admins" content="APP_ADMIN">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/modules/aggregated.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/users/assets/css/login.css">
<link rel="stylesheet" href="/system/assets/css/default.css">
<link rel="stylesheet" href="/system/assets/css/navbar.css">
<!-- Inline javascript. Can set the src /modules/aggregated.js?group=header-->
<script type="text/javascript">{{headerJs|raw}}</script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/js/collapse.js"></script>
{% for file in assets.core.css %}
<link rel="stylesheet" href="/{{file}}">
{% endfor %}
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
【问题讨论】：
-
如果你使用 Angular，那么使用 github.com/angular-ui/bootstrap 而不是 Bootstrap 自己的 JS。
标签： twitter-bootstrap navbar collapse mean