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

【问题标题】：Bootstrap 4 Dropdown - Disable auto placement caused by popper.jsBootstrap 4 Dropdown - 禁用由 popper.js 引起的自动放置
【发布时间】：2018-03-16 14:54:05
【问题描述】：

我正在使用 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>

【问题讨论】：

嗨 Zim 我已经添加了代码，但我认为它不是特定于代码的。我认为它通常是 bootstrap 4 下拉功能？告诉我谢谢

标签： css twitter-bootstrap bootstrap-4 popper.js

【解决方案1】：

引导 4.1

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

引导 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 的更多信息。

【讨论】：

嗨，我也有同样的问题，只是我在页面加载时动态添加了弹出框内容，我试过你的data-display="static"，但每次内容没有时它仍然会跳到视口的顶部适合屏幕，请问如何让body 滚动，而不是弹出框移动，谢谢

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

ZimSystems 在 Bootstrap 4.1 中几乎做到了。要在打开时禁用下拉更改方向，又名。它是 x-placement="bottom-end"，您应该使用“flip”选项，而不是“display”选项。

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

【讨论】：

什么？...你是怎么做到的？每个答案都需要一个例子；）

【解决方案4】：

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

【讨论】：