twitter-bootstrap Bootstrap 3 导航下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20199308/
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
Bootstrap 3 nav dropdown
提问by Fredmat
I'm using navbar with a dropdown menu (Bootstrap 3)
我正在使用带有下拉菜单的导航栏（Bootstrap 3）
- I resize the browser window < 767px
- I open the menu
- I resize the browser window > 767px
- I open the dropdown menu (inside navbar)
- 我调整浏览器窗口的大小 < 767px
- 我打开菜单
- 我调整浏览器窗口的大小 > 767px
- 我打开下拉菜单（在导航栏内）
The issue: A scrollbar appears in the dropdown menu. (see picture below)
问题：下拉菜单中出现滚动条。（见下图）
My "nav" element is relative position.
我的“导航”元素是相对位置。
<nav class="navbar navbar-default clearfix" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="main-menu user hidden-xs">
<li class="dropdown">
<a href="#" class="dropdown-toggle btn btn-xs btn-primary" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li class="divider"></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Does anyone know how to fix this issue?
有谁知道如何解决这个问题？
回答by Zim
Yes.. this is a known bug in Bootstrap 3.0.2 --
是的.. 这是 Bootstrap 3.0.2 中的一个已知错误——
(https://github.com/twbs/bootstrap/issues/11243)
( https://github.com/twbs/bootstrap/issues/11243)
One workaround is to..
一种解决方法是..
.navbar-collapse.in {
overflow-y: visible;
}
Demo: http://bootply.com/96924
回答by bmaniere
Skelly's answer helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
斯凯利的回答有帮助。谢谢你。但是由于我在折叠活动期间看到了一个滚动条，我需要像这样修复它：
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.
Bootstrap 在菜单折叠时应用“折叠”类，然后在折叠完成后“进入”。我希望这对其他人有帮助。
回答by user2813435
I also have this problem.
我也有这个问题。
see this: http://bootply.com/97248
看到这个：http: //bootply.com/97248
- run it
- resize (make it smaller) browser window until it become mobile layout
- open dropdown menu (don't close/collapse it back)
- resize (make it bigger) browser window until it become desktop layout
- you'll see the dropdown menu got vertical scrollbar
- 运行
- 调整（缩小）浏览器窗口的大小，直到它变成移动布局
- 打开下拉菜单（不要关闭/折叠回来）
- 调整浏览器窗口的大小（使其变大），直到它成为桌面布局
- 你会看到下拉菜单有垂直滚动条
it's because the parent (#test in my example) still got 'in' class from when it's still mobile layout.
这是因为父级（在我的示例中为 #test）从它仍然是移动布局时仍然获得了“in”类。
.navbar-collapse.in {
overflow-y: auto;
}
is it bug or by bootstrap design? Anyone know where to fix this in bootstrap.js?
是错误还是引导程序设计？有谁知道在 bootstrap.js 中哪里可以解决这个问题？
EDIT : thx Skelly! can't upvote/comment.
编辑：谢谢斯凯利！不能点赞/评论。
