2014-04-19 223 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

啊!我現在看到它。對不起,在我手機的照片中很難看到... –