2014-09-24 201 views
1

我开始使用Bootstrap及其导航栏。Bootstrap导航栏不崩溃

我试图让它的响应菜单正常工作,但它不能按预期工作。小窗口中的菜单会加载展开,菜单切换不起作用。我已经加载了所有必要的依赖关系,但仍有一些不完全正确。

Fiddle

HTML:

 <!-- Static navbar --> 
      <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
        <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="#">Project name</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="../navbar/">Default</a></li> 
        <li class="active"><a href="./">Static top</a></li> 
        <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
       </ul> 
       </div><!--/.nav-collapse --> 
      </div> 
+1

你的代码工作正常http://www.bootply.com/KPa5Y4MFal – 2014-09-25 04:49:26

回答

2

YPU是在导航栏失踪崩溃类

此列表:

  <ul class="nav navbar-nav navbar-right"> 
       <li><a href="../navbar/">Default</a></li> 
       <li class="active"><a href="./">Static top</a></li> 
       <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
      </ul> 

需要在包裹

 <div class="navbar-collapse collapse"> 

另外你提供的小提琴有不正确的JS和CSS包括。看看这个例子在这里: http://jsfiddle.net/rbd8758f/

+0

即使在该行代码中包装它仍然是相同的。检查http://jsfiddle.net/b2bv9noe/2/ – Imran 2014-09-24 22:43:29

+0

我正在调查它,其他东西是搞砸了,我发现从http://bootsnipp.com/复制的例子帮助了一吨,然后进入并修改位一点点你需要的 – dbrin 2014-09-24 22:47:43

+0

它的奇怪,因为我刚刚复制并粘贴HTML代码从一个引导示例页 – Imran 2014-09-24 22:48:18

2

你把元标记在你的头,这对我有效。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">.