Bootstrap 4下拉菜单 - 禁用由popper.js引起的自动定位

Question

Bootstrap 4下拉菜单 - 禁用由popper.js引起的自动定位

csstwitter-bootstrapbootstrap-4popper.js

13

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

1

嗨Zim，我已经添加了代码，但我不认为它是特定于代码的。我想这是关于Bootstrap 4下拉功能的一般性说明？让我知道，谢谢。 - Vishwas

4个回答

8

在Bootstrap 4.3.1中，我通过向下拉菜单元素添加data-flip="false"来实现此功能。

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

- Dominique

2

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

"display static"会完全禁用定位，而"flip"只会禁用实时检查，当您向屏幕顶部滚动时将下拉菜单翻转。

- Karl Johan Vallner

1

什么？...你如何做到？每个答案都需要一个例子 ;) - Sagive

-1

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

- IhorSh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Zim · Accepted Answer

Bootstrap 4.1

新增了一个"display"选项，用data-display="static"来防止popper.js动态更改下拉菜单的位置。点击这里查看详情。

Bootstrap 4.0

使用popper.js时会出现一些定位问题。

解决方法是将.dropdown设置为position-relative，并将其设置为下拉菜单切换器的data-boundary=""选项。点击这里查看示例。

  <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的信息。

相关问题：
Bootstrap 4：为什么可滚动下拉菜单中的弹出框不显示？
在Bootstrap4中滚动模态框中的下拉菜单