Bootstrap响应式导航栏不崩溃

问题描述：

好吧，所以我几乎直接从文档中获取，似乎没有任何工作（我现在实际上是直接撕掉他们的HTML而不是仅仅是示例）。Bootstrap响应式导航栏不崩溃

首先我的头部分，其中“模板”文件是我的自定义文件：

<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上占据了三条线。我没有看到任何错误通过铬控制台时，其940像素以下...任何想法？

如果您可以创建一个测试页，那将会很棒。通过测试页面找到答案和帮助变得更容易 – Shail 2013-02-14 01:58:14

答

这里是我为你创造的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>

嗯我仍然无法使本地工作，但即使在这个小提琴下拉本身不工作http://jsfiddle.net/SQLP4/ – Msencenb 2013-02-14 02:50:29

朋友，我没有插入菜单项目...用菜单项更新它...再次检查它的工作 – Shail 2013-02-14 03:02:18

谢谢，我从你的小提琴注意到你使用2.3.0 ...似乎我有一个bootstrap 2.2.0的副本，并试图使用2.3.0语法！ – Msencenb 2013-02-14 07:01:05

Bootstrap响应式导航栏不崩溃

相关推荐