jQuery Bootstrap 崩溃不起作用；汉堡菜单没有出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32081497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap collapse isn't working; hamburger menu not showing up
提问by jtbitt
I am making an Angular application, and installed all my libs with Bower. When I check the console, all the sheets/scripts are loading up properly. I also have bootstrap and jQuery defined in my head. I copied the code from Bootstrap's site.
我正在制作一个 Angular 应用程序，并使用 Bower 安装了我所有的库。当我检查控制台时，所有工作表/脚本都正确加载。我的脑海中还定义了 bootstrap 和 jQuery。我从 Bootstrap 的网站复制了代码。
The issue that I'm having is that the hamburger menu never comes up. The links just stay exactly the same as when the screen is big. The other problem is that nothing in the nav-collapse collapse div shows up, even when the site is big. Seems like there is an issue with collapse, which is making both not work. Suggestions?
我遇到的问题是汉堡菜单永远不会出现。链接与屏幕大时完全相同。另一个问题是，即使网站很大，导航折叠折叠 div 中也不会显示任何内容。似乎崩溃存在问题，这使两者都不起作用。建议？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jay - Web Developer</title>
<!-- For Angular Routing -->
<base href='/'>
<!-- CSS -->
<link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
<!-- JS -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-route/angular-route.min.js"></script>
<script src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.js"></script>
<!-- APP -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="jayPortfolio" ng-controller="mainController as main">
<!-- NAVBAR -->
<header>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar">About</span>
<span class="icon-bar">Portfolio</span>
<span class="icon-bar">Experience</span>
<span class="icon-bar">Contact</span>
</a>
<a class="brand" href="#">JAY</a>
<div class="nav-collapse collapse">
work please
</div>
</div>
</div>
</div>
</header>
</body>
</html>
回答by Tomasz Nguyen
The markup of your navbar is not correct. The markup should be as follows:
导航栏的标记不正确。标记应如下所示：
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Huisje Thuisje</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#contact">Contact</a></li>
<!-- Put here your menu items -->
</ul>
</div --><!--/.navbar-collapse -->
</div>
</nav>
In the ulelement, place the menu items. That should do the trick. See also the documentation page.
在ul元素中，放置菜单项。这应该够了吧。另请参阅文档页面。
回答by imtheman
The syntax is more like this for the containerpart:
该部分的语法更像是这样container：
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">JAY</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
回答by Tomas Pajarillaga
in my case, my newly created laravel project hamburger menu is not working, so go to https://getbootstrap.com/docs/4.4/getting-started/introduction/and coppy the 3 js link and add to your header.
就我而言，我新创建的 Laravel 项目汉堡菜单不起作用，因此请访问 https://getbootstrap.com/docs/4.4/getting-started/introduction/并复制 3 个 js 链接并添加到您的标题中。
