Css Bootstrap 4下拉菜单-禁用由popper.js引起的自动放置

我正在使用Bootstrap4下拉列表，大约有18个下拉列表项。 由于高度太高，popper.js会自动将下拉列表从其原始位置移到屏幕顶部。我如何防止这种情况？ 我总是希望下拉列表显示在切换按钮的正下方。 谢谢

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

@topMenu.Name
@foreach（顶部菜单中的var子菜单。子菜单）
{
}

引导程序4.1

有一个新的“显示”选项可以禁用popper.js下拉定位。使用

data display=“static”

来

Bootstrap 4.0

popper.js

和定位存在一些问题

我发现解决方案是将

相对定位到
下拉列表中，并将其设置为下拉切换中的
数据边界=“
选项：


下拉列表
...

边界
设置为下拉列表的
id
。阅读更多关于


相关问题：



ZimSystems在Bootstrap4.1中几乎做到了这一点。要禁用打开时更改方向的下拉列表，请参见。它是x-placement=“bottom end”，您应该使用“翻转”选项，而不是“显示”选项

Display static完全禁用定位，而flip仅禁用实时检查，当您向屏幕顶部滚动时，实时检查会将下拉列表翻转过来。
我在Bootstrap 4.3.1中通过向下拉元素添加
data flip=“false”
实现了这一点

例：
在选项中，您可以尝试将
dropupAuto:true
更改为
dropupAuto:false
。
Hi Zim我已经添加了代码，但我认为它不是特定于代码的。我想这是Bootstrap4的一般下拉功能吧？让我知道thankshi，我有完全相同的问题，只是我在页面加载时动态添加了popover内容，我尝试了你的
data display=“static”
，但每次内容不适合屏幕时，它仍然会跳到视口顶部，请问我如何使
主体
滚动，而不是popover移动，thanxwhat？。。。你是怎么做到的？每个答案都需要一个例子；）
             <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>

  <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>