我刚开始使用bootstrap，并创建了下面的导航栏。它折叠得很好，但是当我点击按钮时，我的链接都没有显示出来。我确实在我的项目中的一个bower components文件夹中有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>UPDATE --这是我的头文件，它主要是从github克隆mean项目，然后使用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>
1条答案
按热度按时间hgtggwj01#
我刚刚在我的本地机器上测试了您的代码，链接就出现了。
您可能忘记了包括
bootstrap.js或bootstrap.min.js。此外，你的代码不应该包含内联样式。例如，编写以下代码是一个不好的习惯：
您应该使用css类。