从溢出容器中显示 Bootstrap-5 下拉菜单

Question

正如here已经问过的那样，我需要将下拉列表添加到滚动到x方向（水平滚动）的表格元素中，并且在最后一列中有一个三点图标，我需要在其中添加下拉元素。但下拉菜单总是夹在表格内，这不是很好的用户体验。

根据 Bootstrap doc，有一个名为

boundary

的选项，但我不知道这个边界选项是如何工作的，甚至不知道它是否完全有效以及如何工作。

如果我从属于

dropdown

类的下拉父级中删除相对位置，并且还从所有非静态的祖先中删除，那么我将获得正确的行为。我不认为这是删除相对位置的正确方法，仅用于将此下拉菜单从容器中取出。

这是唯一的解决方案还是

boundary

有意义？我不明白

popperconfig

是如何工作的以及我应该如何使用

boundary

又名

data-bs-boundary

？

在引导程序的早期版本中，通过一些代码调整，我曾经在 body 元素的末尾一直获得整个下拉列表，但对此不确定。

Answer 1

因此，当下拉菜单实际剪辑在溢出父级/祖先父母之一（祖父、曾祖父等...）下时，需要考虑多种事项

• 当没有 css 转换/不透明度（或创建堆叠上下文的任何其他属性）应用于其中任何一个时，我们可以将静态位置应用于所有父级，以作为快速修复，而无需任何 javascript 额外代码。但是，当任何第三方库在其间添加许多其他元素时，这并没有什么帮助。
• 我们还需要考虑将变换属性应用于父元素的情况，因为即使对于固定位置元素，变换也会创建一个新的堆叠上下文。因此，在这种情况下，我们必须将下拉菜单移出容器。这个问题的答案讨论更多。

当将固定位置应用于下拉菜单足以让它工作时，如果没有其他父级可能创建固定位置可能受到限制的堆叠上下文，那么您可以使用标准引导 popperConfig 策略简单地将其置于所有内容的顶部选项，无需将其移出当前位置。在这里，当下拉菜单打开时，它将应用位置到

fixed

而不是

absolute

。

let myDropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
      const newPopperConfig = { strategy: "fixed"}
      //merge default configuration from bootstrap to our own configuration and return merged config
      return Object.assign(defaultBsPopperConfig, newPopperConfig);                
  }
})

但是当这还不够时，我们需要做以下事情。

考虑到有多个带有 id 的下拉菜单，如 myPopperDropdown-1、2 等。它们都被剪切在隐藏在父级之一上的溢出下，我们可以这样做。

 $("[id*='myPopperDropdown-']").each(function(el,index) {
                var parent, dropdownMenu, left, top;
                $(this).on('show.bs.dropdown',function(){
                    parent = $(this).parent();
                    dropdownMenu = $(this).find('.dropdown-menu');
                    left = dropdownMenu.offset().left -  $(window).scrollLeft();
                    top = dropdownMenu.offset().top - $(window).scrollLeft();

                    $('body').append(dropdownMenu.css({
                        position:'fixed',
                        left: left, 
                        top: top
                    }).detach());
                })

                $(this).on('hidden.bs.dropdown',function(){
                    $(this).append(dropdownMenu.css({
                        position:'absolute', left:false, top:false
                    }).detach());
                })
            })

body {margin: 10px !important}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card">
    <div class="card-body bg-light overflow-hidden">
        <div class="bs-dropdown-1">
            <div class="dropdown" id="myPopperDropdown-1">
                <a class="btn btn-primary dropdown-toggle" role="button" href="javascript:void(0)" aria-expanded="false" data-bs-toggle="dropdown">Dropdown-1</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-body bg-light overflow-hidden mt-3">
        <div class="bs-dropdown-2">
            <div class="dropdown" id="myPopperDropdown-2">
                <a class="btn btn-primary dropdown-toggle" role="button" href="javascript:void(0)" aria-expanded="false" data-bs-toggle="dropdown">Dropdown-2</a>

            <ul class="dropdown-menu" style="position: absolute;">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul></div>
        </div>
    </div>
</div>

到目前为止，还没有找到比这更好的解决方案，甚至在

popperConfig

中进行更改也不起作用，因为即使在固定定位上也存在限制。

原始答案位于Bootstrap下拉列表被溢出剪切：隐藏容器，如何更改容器？。这里稍作修改。