Twitter Bootstrap導航欄菜單滾動

在使用twitter bootstrap 3時，在移動設備菜單nabber上有水平和垂直滾動條。Twitter Bootstrap導航欄菜單滾動

這不是2.3，我不知道如何禁用它，並讓菜單項擴展到沒有任何滾動條。

2013-08-31 DevC

您可以發佈您的HTML？ – ZimSystem

這是新來引導3.

要做到這一點是刪除或/less/navbar.less註釋掉線52和53的最佳方式：https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53（你可以有選擇地刪除第59行）和重新編譯bootstrap.less。

如果你不能像CodeKit或咕嚕的工具重新編譯引導，你會希望你的CSS文件中寫一個媒體查詢挑出並覆蓋.navbar崩潰類可能是這樣的：

@media (max-width: 767px) { 
    .navbar-collapse { 
     max-height: auto; 
     overflow-x: auto; 
    } 
}

我還沒有真正測試過上面的代碼 - 因爲我可以重新編譯。你可能不得不包括！重要的或類似的東西。

來源

2013-09-07 21:17:04 JulienMelissas

這應該這樣做（如果你遵守CSS 3.0規則）

max-height: none;

來源

2013-12-20 05:56:13 Unbreakable

作品！另外'overflow-x：hidden;'殺死水平滾動 – xxjjnn

這樣做的副作用是什麼，儘管在小視口上正確渲染會有什麼副作用？我們是否在這方面針對個人電腦進行優化？ – ficuscr

要刪除垂直滾動條，CSS的該位工作。我沒有水平滾動條。

@media (max-width: 767px) { 
    .navbar-collapse { 
     max-height: none; 
    } 
}

來源

2015-05-12 18:50:31

我只是碰到了這個自己...

就絕對位置.navbar默認。

.navbar-collapse div絕對定位，您需要將它「附加」到不是靜態定位的父/祖先元素。所以，我只是說：

.navbar-default { 
    position: absolute; 
}

不知道有引導4（剛度過它的alpha發佈），但這似乎這樣的伎倆與引導3導航。我有一個非常冗長的導航，現在我可以正確地向下滾動並查看所有導航項目。

來源

2015-08-21 13:18:53 Qasim

這解決了我的問題，非常感謝。 –

另一種解決方案，在自舉3.3.4，則添加以下你的CSS：

/* No scrolling for collapsed menu */ 

.navbar-collapse.in { 
    overflow: hidden; 
    max-height: none !important; 
    height: auto !important; 
}

來源

2016-05-26 09:32:54

Twitter Bootstrap導航欄菜單滾動

回答

相關問題