jQuery Twitter Bootstrap 导航栏菜单滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18552388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Navbar menu scrolling
提问by DevC
While using twitter bootstrap 3, on mobile devices menu nabberhas horizontal and veritcal scrollers.
使用时twitter bootstrap 3，在移动设备上的菜单nabber具有水平和垂直滚动条。
It was not there with 2.3and I couldn't figure out how to disable it and let the menu items extend to full without any scroll-bars.
它不存在，2.3我无法弄清楚如何禁用它并让菜单项在没有任何滚动条的情况下扩展到完整。
回答by JulienMelissas
This is new to Bootstrap 3.
这是 Bootstrap 3 的新功能。
The best way to do this would be to remove or comment out lines 52 and 53 in /less/navbar.less: https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53(you can optionally remove line 59) and recompile bootstrap.less.
最好的方法是删除或注释掉 /less/navbar.less 中的第 52 和 53 行：https: //github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53（您可以选择删除第 59 行）并重新编译 bootstrap.less。
If you can't recompile Bootstrap with a tool like CodeKit or Grunt, you'll want to write a media query in your css document that singles out and overwrites the .navbar-collapse class maybe like this:
如果您无法使用 CodeKit 或 Grunt 之类的工具重新编译 Bootstrap，您将需要在您的 css 文档中编写一个媒体查询，该查询可以选择并覆盖 .navbar-collapse 类，可能如下所示：
@media (max-width: 767px) {
.navbar-collapse {
max-height: auto;
overflow-x: auto;
}
}
I haven't actually tested that code above - as I was able to recompile. You may have to include !important or something like that.
我还没有真正测试过上面的代码 - 因为我能够重新编译。您可能必须包含 !important 或类似的内容。
回答by Unbreakable
This should do it (if you're abiding CSS 3.0 rules)
这应该可以（如果您遵守 CSS 3.0 规则）
max-height: none;
回答by Kyle S
To remove the vertical scrollbar, this bit of CSS worked. I did not have horizontal scrollbars.
为了移除垂直滚动条，这一点 CSS 起作用了。我没有水平滚动条。
@media (max-width: 767px) {
.navbar-collapse {
max-height: none;
}
}
回答by Qasim
I just ran into this myself...
我自己刚刚遇到了这个......
Just absolutely position .navbar-default.
只是绝对定位 .navbar-default。
The .navbar-collapse div is absolutely positioned and you need to "attach" it to a parent/ancestor element that is NOT statically positioned. So, I just added:
.navbar-collapse div 是绝对定位的，您需要将其“附加”到非静态定位的父/祖先元素。所以，我只是补充说：
.navbar-default {
position: absolute;
}
Don't know about Bootstrap 4(which just had it's alpha released), but this seems to do the trick with the Bootstrap 3 nav. I've got a really lengthy nav, and now I can properly scroll down and see all nav items.
不知道 Bootstrap 4（它刚刚发布了 alpha 版），但这似乎与 Bootstrap 3 导航有关。我有一个非常长的导航，现在我可以正确地向下滚动并查看所有导航项目。
回答by Cristi Draghici
Another solution, in Boostrap 3.3.4, is adding the following to your CSS:
Boostrap 3.3.4 中的另一个解决方案是将以下内容添加到您的 CSS：
/* No scrolling for collapsed menu */
.navbar-collapse.in {
overflow: hidden;
max-height: none !important;
height: auto !important;
}
