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

有一个新的"显示"选项,禁用popper.js下拉定位.使用data-display="static"以防止popper.js从动态变化的下拉列表中的位置？

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下拉的.阅读有关数据边界的更多信息.

相关问题:
Bootstrap 4:为什么在可滚动下拉列表中的popover不显示？
在Bootstrap4中滚动模式中的下拉列表

Answer 2

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

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