引导导航栏可折叠无法使其工作

Question

我正在开发一个 Angularjs 应用程序，我想让它成为多平台的，所以我正在尝试使用 Bootsrap，我找到了一个我想遵循的模板 (https://blackrockdigital.github.io/startbootstrap-business-frontpage/#) 问题是我想在屏幕尺寸较小时转换导航栏。

但我不知道我错过了什么，因为它正确地转换为按钮，但是按钮不可点击，所以选项 'inicio'、'servicios' 和 'contacto' 无法访问。

任何帮助都会很棒，这里有 css 和 html 文件：

HTML

<!DOCTYPE html>
<html ng-app="home">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HOME</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>   

        <link href="/web/resources/css/business-frontpage.css" rel="stylesheet" />
        <script src="/web/resources/js/home/home-service.js"></script>
        <script src="/web/resources/js/home/home-controller.js"></script>
        <script src="/web/resources/js/home/home-app.js"></script>
        <script src="/web/resources/lib/translate/angular-translate.js"></script>
        <script src="/web/resources/js/generic/urlLanguageStorage.js"></script>
        <script src="/web/resources/lib/translate/angular-translate-loader-url.min.js"></script>

    </head>

    <body>

               <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a ui-sref="home" translate>navegacion.inicio</a>
                    </li>
                    <li>
                        <a ui-sref="servicios" translate>navegacion.servicios</a>
                    </li>
                    <li>
                        <a ui-sref="contacto" translate>navegacion.contacto</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Image Background Page Header -->
    <!-- Note: The background image is set within the business-casual.css file. -->
    <header class="business-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1><a class="tagline" ui-sref="home" translate>titulo.alergenos</a></h1>
                </div>
            </div>
        </div>
    </header>


<div class="container">
    <div ui-view></div> 
</div>



<div class="container">
<!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>
</div>

    </body>
</html>

CSS

/*
 * Start Bootstrap - Business Frontpage (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */

.business-header {
    height: 400px;
    background: url('http://placehold.it/1920x400') center center no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/* Customize the text color and shadow color and to optimize text legibility. */

.tagline {
    text-shadow: 0 0 10px #000;
    color: #fff;
}

.img-center {
    margin: 0 auto;
}

footer {
    margin: 50px 0;
}

编辑我创建了一个 Jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/

Answer 1

`jQuery` 和 `Bootstrap.js` 都应包含在 [=15= 中] 放在之前 `Bootstrap.js`.

注意：可以使用的`jQuery`的版本会因[=54=的版本而异]`Bootstrap` 正在使用（反之亦然）。

Bootstrap Version 4

JS Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

发布v4.0.0-beta.2 package.json

"peerDependencies": {
    "jquery": "1.9.1 - 3",
    "popper.js": "^1.12.7"
},

Bootstrap Version 3

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

发布v3.3.7 Changelog & bower.json

"dependencies": {
    "jquery": "1.9.1 - 3"
}

对于v3.3.6 bower.json

"dependencies": {
  "jquery": ">= 1.9.1 - 2"
}

对于 v3.3.0 - v3.3.5 bower.json

"dependencies": {
  "jquery": ">= 1.9.1"
}

这不考虑 jQuery v3.0

的发布

对于 v3.0.0rc1 - v3.2.0 bower.json

"dependencies": {
  "jquery": ">= 1.9.0"
}

这不考虑 jQuery v3.0

的发布

引导导航栏可折叠无法使其工作

bootsrap nav-bar collapsable cannot make it work

collapse

twitter-bootstrap

angularjs

`jQuery` 和 `Bootstrap.js` 都应包含在 [=15= 中] 放在之前 `Bootstrap.js`.

注意：可以使用的`jQuery`的版本会因[=54=的版本而异]`Bootstrap` 正在使用（反之亦然）。

Bootstrap Version 4

发布v4.0.0-beta.2 package.json

Bootstrap Version 3

发布v3.3.7 Changelog & bower.json

对于v3.3.6 bower.json

对于 v3.3.0 - v3.3.5 bower.json

对于 v3.0.0rc1 - v3.2.0 bower.json

引导导航栏可折叠无法使其工作

bootsrap nav-bar collapsable cannot make it work

collapse

twitter-bootstrap

angularjs

jQuery 和 Bootstrap.js 都应包含在 [=15= 中] 放在 之前 Bootstrap.js.

注意：可以使用的jQuery的版本会因[=54=的版本而异]Bootstrap 正在使用（反之亦然）。

Bootstrap Version 4

发布v4.0.0-beta.2 package.json

Bootstrap Version 3

发布v3.3.7 Changelog & bower.json

对于v3.3.6 bower.json

对于 v3.3.0 - v3.3.5 bower.json

对于 v3.0.0rc1 - v3.2.0 bower.json

`jQuery` 和 `Bootstrap.js` 都应包含在 [=15= 中] 放在之前 `Bootstrap.js`.

注意：可以使用的`jQuery`的版本会因[=54=的版本而异]`Bootstrap` 正在使用（反之亦然）。