2013-11-24 89 views
0

我知道有一些简单的我很想念,但是当我缩小我的屏幕时,导航栏折叠切换不起作用。我已经搜索过,所以我找不到解决我的问题的解决方案。Bootstrap 3导航栏不会折叠

有人能帮我找出我在下面的代码中缺少的东西吗?

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <title></title> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/slate-bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/larry.css" /> 
</head> 
<body> 
<div id="page"> 
    <header class="container"> 
    <div id="menu" class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <button class="btn btn-success navbar-toggle" 
        data-toggle="collapse" 
        data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span> 
      </button> 
      <div id="logo"> 
       <h4><a href='./index.html'><img src="images/LE-logo.png"></a></h4> 
      </div> 
     </div> 

     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="nav active"><a href="./index.html">Home</a></li> 
       <li class="nav"><a href="./resume.html">Resume</a></li> 
       <li class="nav"><a href="./contact.html">Contact</a></li> 
       <li class="nav"><a href="./about.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
    </header> 

    <section id="body" class="container"> 
    <section id="main" class="col-md-9"> 
     <p> Ipsome loreme, blah , blah</p> 

    </section> 
    </section> 


    <hr /> 
    <footer class="container"> 
    <p>Placeholder for footer</p> 
    </footer> 
</div> 

<script scr="js/jquery-2.0.3.min.js"></script> 
<script scr="js/bootstrap.min.js"></script> 

</body> 
</html> 
+0

图形显示出来,但它不会切换navbar-collapse div。 –

+1

你有什么已经工作正常http://jsfiddle.net/NkED8/ – rwisch45

+0

谢谢@ rwisch45。它必须是一个浏览器问题,或者由于某种原因jQuery不加载。感谢您指出了这一点。我会继续努力。 –

回答

0

在Firebug中调试(绝对是最好的浏览器调试工具),我发现它没有正确加载bootstrap.js。我不知道为什么它不能从我的目录中选择它,但我更改为CDN,并且必须在前面加上“http://”。

0

看起来没问题。如果navbar-collapse元素从未显示,请检查是否添加了任何样式,您是如何隐藏它的?

+0

这是我所了解的Bootstrap框架的一部分。您只需将特定的类名称添加到div,然后连接数据切换和数据目标,它应该为您处理。 –