下拉菜單在調整大小後不起作用

我以bootstrap開始，並使用菜單標題（包含下拉項目）製作了一個小模板。下拉菜單在調整大小後不起作用

問題是，我調整窗口的大小足以強制響應菜單摺疊，使用下拉（導航），而崩潰後，我最大化窗口，下拉菜單項停止工作（顯示一個滾動查看內容而不是下拉）。

示例代碼？只需嘗試引導程序中的「Navbar模板」：http://getbootstrap.com/examples/navbar/

是否有任何已知的解決此問題的方法？

經過Firefox和Chrome測試。

來源

2013-11-15 roirodriguez

更新

添加這個引導文件的CSS後：

@media (min-width: 768px) 
{ 
    .navbar-collapse.in{ overflow-y:visible;} 
}

--end更新

是的，這一下之後的「中」級有效果「奇怪」重尺寸仍然是。

你可以使用jQuery刪除類：從

$(document).ready(function() 
{ 
    var $window = $(window); 

     // Function to handle changes to style classes based on window width 
     function checkWidth() { 

     if ($window.width() >= 768) { 
      $('.navbar-collapse').removeClass('in').addClass('collapse'); 
     } 
    } 

    // Execute on load 
    checkWidth(); 

    // Bind event listener 
     $(window).resize(checkWidth); 
});

調整大小代碼：Dynamically changing class name based on window size，更好的解決辦法來做到這一點：How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

~~也許還可以重置屏幕寬度的。在類在媒體查詢的斷點之上。~~

這似乎是一個錯誤，請參閱：https://github.com/twbs/bootstrap/issues/11243

來源

2013-11-15 23:27:55

對方回答沒有爲我工作，因爲崩潰類增加了一個顯示：無; （也許是不同版本的Bootstrap）。爲我工作的解決方案添加到您的響應CSS：

@media screen and (min-width: 768px){ 
    .collapse{ display:block;} 
}

對我來說，當我打開，然後關閉摺疊菜單，然後調整大小發生了問題。希望這可以幫助。

來源

2014-03-10 13:48:08

在崩潰元素上強制自動高度（突破點以上）爲我工作。

找到切換按鈕上的id或class，例如： data-target=".navbar-ex1-collapse"並使用最小寬度（您的折點）：

@media screen and (min-width: 768px){ 
    .navbar-ex1-collapse { height:auto !important;} 
}

來源

2015-06-19 10:00:07

下拉菜單在調整大小後不起作用

回答

相關問題