引導導航欄崩出問題的當非移動（包括小提琴）

我跟着這裏的答案讓我聯繫到合攏展開的導航欄時，它是在下拉菜單模式：引導導航欄崩出問題的當非移動（包括小提琴）

Programatically toggle bootstrap 3 navigation bar

然而，當它不下拉模式（桌面），我在普通的非移動導航欄上瞬間得到一個奇怪的「崩潰」動畫 - 它會從我的按鈕的文本上下移開，好像它試圖摺疊掉不在那裏的下拉導航欄，所以它代替了我的主導航欄的內容。

我有我的菜單鏈接下面的代碼：

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <!--ko foreach: authorizedRoutes --> 
      <li> 
       <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"></a> 
      </li> 
      <!-- /ko --> 
     </ul> 
     </div>

這對我的摺疊圖標：

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" toggle="offline"> 
      <span class="sr-only">Toggle Navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button>

會是什麼造成這種奇怪的故障？

這裏有一個的jsfiddle其中的行爲可以看出 - （縮小/擴大你的瀏覽器中看到的模式 - 擴大是在干擾發生時）：http://jsfiddle.net/D2Gsa/11/

來源

2014-10-09 user666

你爲什麼不把它比作的例子之一上GetBootstrap.com - 你缺少導航欄頭類清除浮動，所以你可能會丟失更多的類。 – Christina 2014-10-09 01:54:40

至於這個問題：「什麼會導致這個」。您有data-toggle="collapse"的鏈接，這迫使他們摺疊整個列表容器data-target = ".navHeaderCollapse"。

您可以通過刪除data-toggle="collapse"的鏈接，這也將導致下拉菜單沒有倒塌移動模式

點擊他們，你也可以覆蓋你的.navHeaderCollapse動畫過專門針對非移動模式時，解決這個問題。這種方式點擊鏈接將在移動視圖中摺疊整個菜單，但不會在更寬的屏幕上執行此操作。

@media (min-width: 768px){ 
    .navHeaderCollapse.collapsing{ 
     transition:none; 
     -webkit-transition:none; 
     -moz-transition:none; 
     overflow:visible; 
    } 
}

查看更新fiddle

來源

2014-10-09 13:47:58 paulitto

引導導航欄崩出問題的當非移動（包括小提琴）

回答

相關問題