2014-04-19 172 views
0

我正在使用Twitter Bootstrap 3.我在写一个简单的导航栏,但没有响应:如果我放大浏览器,Toggle navigation不起作用。您可以复制并粘贴此HTML文件并使用Chrome进行缩放,但toogle无效。Twitter Bootstrap 3导航栏不响应

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> 
<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</head> 

<body> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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="/">Title</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="/about">About</a></li> 
       <li><a href="/">Blog</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

</body> 
</html> 

你能帮帮我吗?

回答

4

您忘记包括jQuery的!将这添加到您的头标中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
0

zoom在浏览器和切换导航工作。可能是你面对的其他问题。

DEMO

without zoom

with zoom

+0

这适用于Jsfiddle,但不适用于真正的应用程序,因为jsfiddle自动包含jquery。 –

+0

小提琴不自动包括jquery,我其实包括jquery在小提琴中,你可以在左边看到.. :) – 4dgaurav

+0

啊!我现在看到它。对不起,在我手机的照片中很难看到... –