As the 引导文件 http://getbootstrap.com/javascript/#dropdowns-usage比如说,下拉菜单没有选项...这很遗憾,但这意味着当前没有针对您想要的功能的“引导”解决方案。不过,现在 Angular-UI/Bootstrap 中有一个解决方案套件(如果您正在使用它)。您引用的票证已关闭,因为它终于添加到 Angular-UI https://github.com/fernando-sendMail/bootstrap/commit/6c18567811eb790f68b9ec6d0df2c58d3e20bd44截至 2015 年 7 月 15 日。
您所要做的就是“将 dropdown-append-to-body 添加到下拉元素,以将内部下拉菜单附加到正文。当下拉按钮位于带有溢出:隐藏的 div 内时,这非常有用,否则菜单将被隐藏。(参考) https://github.com/angular-ui/bootstrap/tree/master/src/dropdown/docs
<div class="btn-group" dropdown dropdown-append-to-body>
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
希望这可以帮助!
EDIT
为了回答另一个 SO 问题,我找到了一个在不使用 Angular-UI 的情况下效果很好的解决方案。它可能是“hacky”,但它不会破坏引导菜单功能,而且它似乎适合我使用过的大多数用例。
所以我会留下一些东西,以防其他人看到这个并感兴趣。第一个说明了为什么使用主体附加菜单可能会很好,第二个显示了工作解决方案:
问题小提琴 https://jsfiddle.net/hvx4zres/
问题:面板体内的选择下拉菜单
<div class="panel panel-default">
<div class="panel-body">
<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>
</div>
</div>
解决方案小提琴 https://jsfiddle.net/hvx4zres/5/
(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();
});
})();
EDIT我终于找到了我最初找到这个解决方案的地方。必须在哪里给予信任信用到期了! https://stackoverflow.com/a/27711138/2041091