Question

我遇到与this 类似的问题。但那里的解决方案对我的问题不起作用。该讨论已经结束，以获得进一步的建议。不幸的是，我无法完全按照jsfiddle显示我的代码。但问题是this。当尝试扩展第一个面板部分内的下拉列表时，隐藏在其他元素后面的下拉列表。我花了好几个小时尝试了有关＆＃34;堆叠上下文＆＃34;，＆＃34; position＆＃34;和＆＃34; z-index＆＃34;的不同建议。如果有人能指出任何有用的资源，我真的很感激。

<div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<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>

Answer 1

您有两种选择。您可以通过将'overflow：auto'设置为父css来扩展容器的溢出以适应内容。

<强> FIDDLE DEMO

.panel-body { /* parent container of the menu */
    overflow:auto;
}

或者您可以通过JavaScript在功能上执行某些操作来处理菜单放置。这个选项有点'hacky'，需要进一步改进。您需要改进它以在同一页面上同时打开多个菜单，并且您需要改进它选择菜单的方式。您可能还希望添加滚动支持以使用其目标元素移动菜单，除非这不是问题。这是小提琴：

<强> FIDDLE DEMO

(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();                              
  });                                                   
})();

可能有更好的方法，但概念是将菜单从父元素的范围移动到正文。当您依靠html数据属性来设置菜单时，您将无法执行此操作，但这是我引用的第二个解决方案变得有用的地方。

可悲的是，我建议查看bootstrap提供的'Via Javascript'选项，但显然他们没有设置目标追加元素的选项。很高兴有一个选项可以将菜单附加到您想要的任何元素上，就像大多数其他项目一样： Bootstrap Docs

修改

正如@Andrea Pizzirani所提到的，你可以尝试删除菜单绝对定位的css，但我不推荐它！这会搞乱菜单的所有其他实例，除非您添加其他css来限制更改的范围。此外，如果您希望菜单位于按钮下方，则必须重做已经存在的引导程序的CSS。

尽管如此，如果它有效，并且您并不担心搞乱所有其他菜单，它可能是您正在寻找的解决方案。这是一个展示解决方案的小提琴：

<强> FIDDLE DEMO

dropdown-menu {}

修改我终于找到了我最初找到这个解决方案的地方得到credit is due!
的信用

Answer 2

尝试从

中删除 position：absolute;

dropdown-menu {}

并将菜单放在按钮下的css。

Answer 3

您只需要添加：

.panel.panel-default{
      overflow: inherit !important;
    }

JSFIDDLE DEMO

隐藏在其他元素后面的Bootstrap下拉菜单

3 个答案: