twitter-bootstrap bootstrap 的崩溃不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17209235/
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's collapse doesn't work
提问by Pratham Mehta
i have written this code using bootstrap to use the collapse-menu.
我已经使用引导程序编写了此代码以使用折叠菜单。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Up and Running with Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Roux Academy Conference</a>
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</nav>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
this code has to collapse the list items on resizing the browser window but it doesnt work in any of the browser(FF, Chrome or IE).
此代码必须在调整浏览器窗口大小时折叠列表项，但它不适用于任何浏览器（FF、Chrome 或 IE）。
thanx in advance.
提前谢谢。
回答by harley_woop
The right HTML wasn't being used to make the nav bar responsive.
没有使用正确的 HTML 来使导航栏具有响应性。
I used the code from http://twitter.github.io/bootstrap/components.html#navs, and made:
我使用了来自http://twitter.github.io/bootstrap/components.html#navs的代码，并做了：
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<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="#">Roux Academy Conference</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</div>
</div>
</nav>
This makes the desired behaviour as long as the the necessary JS/CSS is linked.
只要链接了必要的 JS/CSS，就会产生所需的行为。
Working code here: http://codepen.io/hwg/pen/gFLfz(FF,Chrome Only?)
这里的工作代码：http: //codepen.io/hwg/pen/gFLfz（FF，仅限Chrome？）
or here: http://www.bootply.com/65033(IE also)
或在这里：http: //www.bootply.com/65033（IE 也是）
回答by sangram parmar
There is some mistake in your html ..
您的 html 中有一些错误..
add this for collapse menu:
添加此折叠菜单：
<div class="nav-collapse collapse">
add this for collapse menu button
添加此折叠菜单按钮
<button type="button" 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>
</button>
Please Try this:
请试试这个：
<head >
<title></title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" 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>
</button>
<a class="brand" href="#">Roux Academy Conference</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">The Artists</a></li>
<li><a href="#">The Art</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
