twitter-bootstrap 隐藏在其他元素后面的 Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32526201/
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 dropdown menu hidden behind other elements
提问by burktelefon
I have a problem similar to this . But the solutions there does not work for my issue. And that discussion has been closed for further suggestions. Unfortunately I can't show my code exactly as it is on jsfiddle. However the issue is something like this. When trying to expand the dropdown inside first panel section, the dropdown hidden behind other elements. I've spent hours trying different suggestions concerning "stacking context", "position", and "z-index". I would really appreciate if anyone could point me to any resources that could help.
我有类似的问题本。但是那里的解决方案对我的问题不起作用。并且该讨论已结束以供进一步建议。不幸的是，我无法完全按照 jsfiddle 显示我的代码。然而，问题是这样的。当尝试在第一个面板部分展开下拉菜单时，下拉菜单隐藏在其他元素后面。我花了几个小时尝试关于“堆叠上下文”、“位置”和“z-index”的不同建议。如果有人能给我指出任何可以提供帮助的资源，我将不胜感激。
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Another item</a>
</li>
<li><a href="#">This is a longer item that will not fit properly</a>
</li>
</ul>
</div>
回答by Jonathan
You have two options. You can make the container's overflow expand to fit the content by setting 'overflow: auto' to the parent's css.
你有两个选择。您可以通过将 'overflow: auto' 设置为父级的 css 来使容器的溢出扩展以适应内容。
.panel-body { /* parent container of the menu */
overflow:auto;
}
Or you could do something functionally with JavaScript to handle the menu placement. This option is a little bit 'hacky' and would require further improvements. You would need to improve it to handle multiple menus open at once on the same page, and you would need to improve how it selects the menu. You might also want to add scroll support to move the menu with its target element unless that's not an issue. Here's the fiddle:
或者你可以用 JavaScript 做一些功能性的事情来处理菜单放置。这个选项有点“hacky”，需要进一步改进。您需要改进它以处理在同一页面上同时打开的多个菜单，并且您需要改进它选择菜单的方式。您可能还想添加滚动支持以移动菜单及其目标元素，除非这不是问题。这是小提琴：
(function() {
// hold onto the drop down menu
var dropdownMenu;
// and when you show it, move it to the body
$(window).on('show.bs.dropdown', function(e) {
// grab the menu
dropdownMenu = $(e.target).find('.dropdown-menu');
// detach it and append it to the body
$('body').append(dropdownMenu.detach());
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this could be improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left
});
});
// and when you hide it, reattach the drop down, and hide it normally
$(window).on('hide.bs.dropdown', function(e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
There is probably a better way to do this, but the concept is to move the menu from the confines of the parent element to the body. When you're relying on the html data-attributes to setup the menu, you'll have trouble doing this, but that is where the second solution I reference becomes useful.
可能有更好的方法来做到这一点，但概念是将菜单从父元素的范围移动到正文。当您依赖 html 数据属性来设置菜单时，这样做会遇到麻烦，但这就是我参考的第二个解决方案变得有用的地方。
Sadly I would have suggested looking into the 'Via Javascript' options that bootstrap provides, but apparently they don't have the option to set the target append element. It would have been nice to have an option to append the menu on to whichever element you want like most of their other items: Bootstrap Docs
可悲的是，我会建议查看引导程序提供的“通过 Javascript”选项，但显然他们没有设置目标附加元素的选项。有一个选项可以将菜单附加到您想要的任何元素上，就像他们的大多数其他项目一样：Bootstrap Docs
EDIT
编辑
As @Andrea Pizzirani mentioned, you could try removing the css for the menu absolute positioning, but I wouldn't recommend it! That will mess up all other instances of the menu unless you add other css to restrict scope of the change. Also, if you want the menu positioned under the button, you'll have to redo CSS that bootstrap already had in place.
正如@Andrea Pizzirani 提到的，您可以尝试删除菜单绝对定位的 css，但我不推荐它！这将弄乱菜单的所有其他实例，除非您添加其他 css 来限制更改的范围。此外，如果您希望菜单位于按钮下方，则必须重做引导程序已经就位的 CSS。
Still, if it works, and you're not worried about messing up all other menus, it may be the solution you were looking for. Heres a fiddle demonstrating the solution:
尽管如此，如果它有效，并且您不担心弄乱所有其他菜单，它可能是您正在寻找的解决方案。这是一个演示解决方案的小提琴：
dropdown-menu {}
EDITI finally found where I originally found this solution. Gotta give credit where credit is due!
回答by Andrea Pizzirani
Try to remove position: absolute;from:
尝试删除位置：绝对；从：
dropdown-menu {}
and place the menu under the button by css.
并通过css将菜单放在按钮下。
回答by Tell Me How
You need to add only:
您只需要添加：
.panel.panel-default{
overflow: inherit !important;
}
