Drop down menu 手风琴内的Bootstrap 4下拉菜单

我正在使用Bootstrap4和手风琴面板，在这些面板中我有表格和一些带有下拉菜单的输入。从我提供的代码片段中，您可以看到下拉列表不会显示在顶部（在其他手风琴上），而只显示在手风琴内部

有人知道怎么解决这个问题吗

使用下拉示例输入
这只是另一个下拉菜单

Bootstrap 4中的下拉列表放置是使用

popper.js动态完成的，这在其他元素（如手风琴）中可能是个问题。您可以使用一些控件来控制下拉位置

在这种情况下，在下拉菜单上使用
data boundary=“parent”data flip=“false”
和
下拉菜单右键
，似乎效果最好





相关：



为来自谷歌的人解答同样的问题

我从一个投稿人那里得到了关于Bootstrap Git的回复，有人向我指出这不是手风琴造成的。它是
包装器和
溢出-x:auto
。使此
可见
可以纠正这一点，但显然会破坏表上的响应滚动

目前，在这种情况下没有真正的解决方案，在手风琴中有一个带有下拉菜单的桌子。
我将研究一下popper选项。。。从你的例子来看，我不确定你是否理解。。我想下拉菜单出现在手风琴上，而不是在它里面。最重要的是。
<div class="input-group">
    <input name="inputwithdropdown" type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-boundary="parent" data-flip="false" aria-haspopup="true" aria-expanded="false"></button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Menu1</a>
            <a class="dropdown-item" href="#">Menu2</a>
            <a class="dropdown-item" href="#">Menu3</a>
            <a class="dropdown-item" href="#">Menu4</a>
            <a class="dropdown-item" href="#">Menu5</a>
            <a class="dropdown-item" href="#">Menu6</a>
            <a class="dropdown-item" href="#">Menu7</a>
            <a class="dropdown-item" href="#">Menu8</a>
        </div>
    </div>
</div>