Question

我是使用bootstrap的新手，并创建了以下导航栏。它崩溃得很好，但是当我点击按钮时，我的链接都没有显示出来。我确实将collapse.js放在项目中的bower组件文件夹中。到目前为止，我已经尝试将数据目标更改为＃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克隆平均项目然后使用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>

Answer 1

我刚刚在本地计算机上测试了您的代码，链接显示给我。

您可能忘记包含bootstrap.js或bootstrap.min.js。

此外，您的代码不应包含内联样式。例如，写一个不好的做法：

    <div style="float:left; width: 40%;">

你应该使用css类。

单击时，Twitter Bootstrap折叠导航栏无响应

1 个答案: