Bootstrap崩潰在小視圖中不起作用

Question

我在小視圖中似乎遇到了Bootstrap崩潰下拉功能的一個奇怪問題。我在XS和S視圖的標題中都有圖標，在XS中，單擊這些將會擴展該功能，而在S中 - 這些下拉列表已經打開，如果我嘗試單擊與下拉菜單交互的按鈕，奇怪的動畫。

Iv注意到關閉顯示：！important;在引導CSS（瀏覽器調試器）導航欄collapse.collapse似乎可以解決這個問題 - 但這是一個很差的修復各種原因 - 我不知道如何我可以重寫這個在我的自定義樣式表。有沒有人與Bootstrap Collapse下拉菜單有類似的問題？

我創建了一個Bootply文件，圖像和字體真棒圖標不會顯示在那裏，所以它看起來有點奇怪，忽略紅線，因爲那裏是測試某物的高度。

http://www.bootply.com/2dWHqPQ0x3

我知道它不是一個編碼服務 - 只是尋找指向正確的方向，將有利於那些在將來發生類似問題。

Answer 1

這是因爲'navbar-collapse'的內置工作（切換）只適用於您的bootstrap.css中定義的xs屏幕。

這是從自舉站點採取： 改變摺疊移動導航欄斷點 導航欄摺疊成其垂直移動視圖當視口比@網格浮子斷點窄，並擴展到其水平非移動視圖當視口的寬度至少爲@ grid-float-breakpoint時。在Less源代碼中調整此變量以控制導航欄合攏/展開的時間。默認值是768px（最小的「小」或「平板電腦」屏幕）。

所以基本上你需要改變它，以便它從992px而不是768px開始。

@media (min-width: 768px){ /* change to 992px (or whatever you've set your grid breakpoint at for 'md') */ 
    .navbar-collapse.collapse { 
    display: block!important; 
    height: auto!important; 
    padding-bottom: 0; 
    overflow: visible!important; 
    } 
}