Html Bootstrap 响应式导航栏不会折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14865665/
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 responsive navbar not collapsing
提问by Msencenb
Ok so I'm taking this almost directly off of the docs and nothing seems to be working (I'm actually now ripping their html directly instead of just the example).
好的，所以我几乎直接从文档中删除了这个，并且似乎没有任何效果（实际上我现在是直接翻录他们的 html 而不仅仅是示例）。
First my head section, where the 'template' files are my custom files:
首先是我的头部部分，其中“模板”文件是我的自定义文件：
<head>
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/assets/responsive_template/css/bootstrap.css" rel="stylesheet">
<link href="/assets/responsive_template/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/responsive_template/css/template.css" rel="stylesheet">
<script src="/assets/responsive_template/js/jquery.js"></script>
<script src="/assets/responsive_template/js/jquery-ui-1.10.0.min.js"></script>
<script src="/assets/responsive_template/js/bootstrap.js"></script>
<script src="/assets/responsive_template/js/template.js"></script>
</head>
Now the actual navbar section:
现在是实际的导航栏部分：
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Prototype</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li><a id="back-button" href="#">Back</a></li>
<li><a id="submit-button" href="#">Submit</a></li>
</ul>
</div>
</div>
</div>
</div>
However running this nothing collapses... it just takes up three whole lines up top on my iPhone. I'm not seeing any errors via chrome console when its below 940px either... any thoughts?
然而，运行这一切都不会崩溃......它只需要在我的 iPhone 上占据整整三行。当 chrome 控制台低于 940 像素时，我也没有看到任何错误......有什么想法吗？
回答by Shail
Here's the Jsfiddle I created for you - http://jsfiddle.net/shail/F4NfT/10/Working !
这是我为您创建的 Jsfiddle -http://jsfiddle.net/shail/F4NfT/10/工作！
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>
