Twitter Bootstrap Navbar菜单滚动

Question

使用twitter bootstrap 3时，在移动设备上，菜单nabber包含水平和veritcal滚动条。

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中添加以下内容：

{{1}}