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导航栏菜单滚动

回答

相关问题