我的響應式導航欄出現問題

我在Bootstrap 3.0中創建了導航欄，但當我摺疊頁面並按下煎餅按鈕時，我的菜單項不會出現。我的響應式導航欄出現問題

我在做什麼錯？

<div class="container"> 
    <div class="row"> 
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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" rel="home" href="/" title="Bryan Collins Portfolio">Bryan Collins Portfolio</a> 
      </div> 

      <div class="collapse navbar-collapse" id="collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="portfolio.html">Portfolio</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 

     </nav> 
    </div> 
</div>

我按照您的建議更改了代碼。它應該看起來像這樣嗎？

<div class="container"> 
    <div class="row"> 
     <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" 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" rel="home" href="/" title="Bryan Collins Portfolio">Bryan Collins Portfolio</a> 
      </div> 

      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="index.html">Home</a></li> 
        <li><a href="portfolio.html">Portfolio</a></li> 
        <li><a href="contact.html">Contact</a></li> 
       </ul> 
      </div> 

     </nav> 
    </div> 
</div>

來源

2013-10-08 user37850

經過測試。

<div class="navbar-wrapper"> 
    <div class="container"> 
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
     <a class="navbar-brand" rel="home" href="/" title="Bryan Collins Portfolio">Blank</a> 
</div> 

    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="portfolio.html">Portfolio</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
    </div> 
    </div> 
    </div>

來源

2013-10-08 20:45:57 Zeeba

改變了我的代碼，仍然沒有工作 – user37850

謝謝，現在的作品。 – user37850

酷豆，確保你從bootstrap頁面獲得response.js，否則你的導航欄將無法在IE8中工作。 http://getbootstrap.com/getting-started/#browsers – Zeeba

你的代碼似乎就好了工作：http://jsfiddle.net/HtgCq/

是否包含jQuery和需要的JS文件，如documentation

插件依賴性

的聲明響應式導航欄需要包含摺疊插件 d在您的Bootstrap版本中。

（既然這麼希望我包括代碼），只需添加這樣的事情您的標記：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script>

來源

2013-10-08 22:00:07 Pevara

我的響應式導航欄出現問題

回答

相關問題