Twitter Bootstrap Navbar菜單滾動

Question

在使用twitter bootstrap 3 ，在移動設備上菜單nabber具有水平和nabber滾動條。

它不存在於2.3並且我無法弄清楚如何禁用它並讓菜單項擴展到完全沒有任何滾動條。

Answer 1

這是Bootstrap 3的新功能。

執行此操作的最佳方法是刪除或注釋/less/navbar.less中的第52行和第53行： https ： //github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53 （您可以選擇刪除第59行）並重新編譯bootstrap.less。

如果你不能用CodeKit或Grunt這樣的工具重新編譯Bootstrap，你會想要在你的css文檔中編寫一個媒體查詢來單獨輸出並覆蓋.navbar-collapse類可能是這樣的：

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

我實際上沒有測試過上面的代碼 - 因為我能夠重新編譯。 你可能必須包括！important或類似的東西。

Answer 2

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

 max-height: none;

Answer 3

要刪除垂直滾動條，這一點CSS工作。 我沒有水平滾動條。

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

Answer 4

我自己就碰到了這個......

只是絕對定位.navbar-default。

.navbar-collapse div是絕對定位的，您需要將它“附加”到非靜態定位的父/祖先元素。 所以，我剛補充說：

.navbar-default {
    position: absolute;
}

不知道Bootstrap 4（它剛剛發布了alpha版本），但這似乎可以解決Bootstrap 3導航問題。 我有一個非常冗長的導航，現在我可以正確向下滾動並查看所有導航項目。

Answer 5

Boostrap 3.3.4中的另一個解決方案是在CSS中添加以下內容：

/* No scrolling for collapsed menu */

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