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>

Answer 1

Bootstrap 4.1

有一个新的 "display" 选项可以禁用 popper.js 下拉菜单定位。使用 data-display="static" 到 prevent popper.js from dynamically changing the dropdown position...

Bootstrap 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。阅读更多关于 data-boundary.

相关问题：

Answer 2

ZimSystems 在 Bootstrap 4.1 中几乎是正确的。要在打开时禁用下拉菜单更改方向，又名。它是 x-placement="bottom-end"，你应该使用 "flip" 选项，而不是 "display" 选项。

显示静态完全禁用定位，而翻转仅禁用实时检查，即当您滚动到屏幕顶部时，将下拉列表上下颠倒。

Answer 3

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

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

Answer 4

在选项中，您可以尝试将dropupAuto : true更改为dropupAuto : false。 https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version

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

Bootstrap 4 Dropdown - Disable auto placement caused by popper.js

css

twitter-bootstrap

bootstrap-4

popper.js