bootsrap导航栏可折叠无法使其正常工作 [英] bootsrap nav-bar collapsable cannot make it work
问题描述
我正在开发Angularjs应用程序，并且我想使其成为多平台应用程序，因此我尝试使用Bootsrap，我发现了一个我想遵循的模板(
i'm developing an Angularjs application and i'd like to make it multiplatform so to do that i'm trying to use Bootsrap, i found a template i'd like to follow (https://blackrockdigital.github.io/startbootstrap-business-frontpage/#) the problem is that i want to transform the navbar when the screen size is smaller.
但是我不知道我要缺少什么，因为它可以正确地转换为按钮，但是按钮不可单击，因此无法使用选项"inicio"，"servicios"和"contacto".
but i don't know what i'm missing, because it does correctly the transformation to a button but then, the button is not clickable so the options 'inicio', 'servicios' and 'contacto' are unreachable.
任何帮助都会很棒，这里有CSS和HTML文件:
Any help would be awesome, here you have the css and html files:
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 © 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/
EDIT I created a Jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/
推荐答案
jQuery 和 Bootstrap.js 都应包含在 jQuery 放在之前 Bootstrap.js .
注意:可以使用 的 jQuery 的版本会因所使用的 Bootstrap 的版本而异(或反之亦然).
Bootstrap 版本4
Both jQuery and Bootstrap.js should be included with jQuery placed before Bootstrap.js.
Note: The version of jQuery that can be used will vary depending on the version of Bootstrap being used (or vice versa).
Bootstrap Version 4
JS我们的许多组件都需要使用JavaScript才能起作用. 具体来说，它们需要 jQuery ，
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.
我们使用 jQuery的苗条构造，但也支持完整版本.
We use jQuery’s slim build, but the full version is also supported.
对于发行版 v4 .0.0-beta.2 package.json
For Release v4.0.0-beta.2 package.json
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.12.7"
},
引导程序版本3
Bootstrap Version 3
需要jQuery
请注意，所有JavaScript插件都需要jQuery 如入门模板中所示. 请咨询我们的 bower.json 来查看支持哪些版本的jQuery.
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更改日志& bower.json >
For Release v3.3.7 Changelog & bower.json
"dependencies": {
"jquery": "1.9.1 - 3"
}
对于 v3.3.6 bower.json
For v3.3.6 bower.json
"dependencies": {
"jquery": ">= 1.9.1 - 2"
}
对于v3.3.0- v3.3.5 bower. json
For v3.3.0 - v3.3.5 bower.json
"dependencies": {
"jquery": ">= 1.9.1"
}
这不考虑jQuery v3.0的发布
"dependencies": {
"jquery": ">= 1.9.0"
}
这不考虑jQuery v3.0的发布
这篇关于bootsrap导航栏可折叠无法使其正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
