Bootstrap 4 Dropdown - 禁用由 popper.js 引起的自动放置

Question

我正在使用 Bootstrap 4 下拉菜单，大约有 18 个下拉项目。因为高度太大，popper.js 会自动将下拉菜单从原来的位置移到屏幕顶部。我该如何防止这种情况？我总是希望下拉菜单出现在切换它的按钮的正下方。谢谢

按要求发布代码 - （我使用的是 C#，但代码应该传达我希望的观点）

              <div class="dropdown">
                <span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @topMenu.Name
                </span>
                <div class="dropdown-menu"  style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
                    @foreach (var subMenu in topMenu.SubMenu)
                    {
                        <a class="dropdown-item" href="@Url.Content("~/" + subMenu.Url)">@subMenu.Name</a>

                    }
                </div>
            </div>

原文由 Vishwas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 4.1

有一个新的“显示”选项可以禁用 popper.js 下拉定位。使用 data-display="static" 防止popper.js动态改变下拉位置…

引导程序 4.0

popper.js 和定位存在一些问题。

我发现解决方案是 position-relative .dropdown ，并将其设置为下拉切换中的 data-boundary="" 选项： https://www.codeply。 com/go/zZJwAuwC5s

   <div class="dropdown position-relative" id="dd">
        <button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 1</a>
            ...
        </div>
   </div>

boundary 设置为下拉列表的 id 。阅读有关 数据边界的 更多信息。

---

相关问题：

Bootstrap 4：为什么不显示可滚动下拉列表中的弹出框？

在 Bootstrap4 的模式中滚动下拉列表

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我通过在下拉元素中添加 data-flip="false" 在 Bootstrap 4.3.1 中实现了这一点。

例如： <a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>

原文由 Dominique 发布，翻译遵循 CC BY-SA 4.0 许可协议