2015-02-24 159 views
0

我有一個使用Boostrap 3.2的頁面。當我重新調整窗口大小(chrome)來觸發響應式設計時,導航欄的行爲非常奇怪。它可以工作一次,但任何後續的呼叫都不起作用。Bootstrap NavBar Responsive Weirdness

enter image description here

奇怪的是,我不能得到表現在的jsfiddle相同的方式。所以,我要提出的Dropbox的鏈接

https://dl.dropboxusercontent.com/u/3740186/test/publications.html

的HTML的導航欄

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- 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="./Index.html"> 
      <img src="./images/logo_big.png" width="30" height="30" title="PIT" alt="PIT" /> 
      Test Pitt 
     </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> 
      <a href="./publications.html">Home</a> 
      </li> 
      <li> 
      <a href="./publications.html">Members</a> 
      </li> 

      <li> 
      <a href="./publications.html">Research</a> 
      </li> 

      <li> 
      <a href="./publications.html">Publications</a> 
      </li> 

      <li class="active"> 
      <a href="./publications.html">Teaching</a> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
    </nav> 

感謝

回答

2

也有一些是錯誤的與您在結束腳本。

$('.collapse').on('shown.bs.collapse', function (e) { 
    $("#" + e.target.id.replace("abs_", "btn_")).html("<span class=\"glyphicon glyphicon-collapse-up\" aria-hidden=\"true\"></span> &nbsp; Hide Abstract"); 
}); 

$('.collapse').on('hidden.bs.collapse', function (e) { 
    $("#" + e.target.id.replace("abs_", "btn_")).html("<span class=\"glyphicon glyphicon-collapse-down\"aria-hidden=\"true\"></span> &nbsp; Show Abstract"); 
}); 

您這些事件添加到所有.collapse元素,包括你的菜單時的尺寸重新調整窗口。

+0

有什麼不同?你有沒有嘗試我在線程中的鏈接? – Sam 2015-02-24 16:05:08

+0

結構不同。刪除navbar-wrapper和容器div,並用我寫回答的nav元素替換nav元素。 – WonkierSteam9 2015-02-24 17:53:29

+0

我不好,這不是。編輯我的答案。 – WonkierSteam9 2015-02-24 18:03:19