好吧,我几乎直接从文档中删除了这个,但似乎没有任何效果(实际上我现在直接翻录他们的 html,而不仅仅是示例)。
首先是我的头部部分,其中"template"文件是我的自定义文件:
<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>
现在是实际的导航栏部分:
<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>
但是运行这个没有任何崩溃......它只占用了我 iPhone 顶部的整整三行。当 chrome 控制台低于 940px 时,我也没有看到任何错误...有什么想法吗?
最佳答案
这是我为您创建的 Jsfiddle - <a href="http://jsfiddle.net/shail/F4NfT/10/" rel="noreferrer noopener nofollow">http://jsfiddle.net/shail/F4NfT/10/</a>
在职的 !
<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>
关于html - Bootstrap 响应式导航栏不会折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14865665/