twitter-bootstrap Bootstrap 4 Dropdown - 禁用由 popper.js 引起的自动放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49323672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
提问by Vishwas
I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items. Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this? I always want the dropdown to appear right below the button that toggles it. Thanks
我正在使用 Bootstrap 4 下拉菜单，大约有 18 个下拉项目。因为高度太大，popper.js 会自动将下拉框从原来的位置移到屏幕顶部。我如何防止这种情况？我总是希望下拉菜单出现在切换它的按钮正下方。谢谢
Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping)
按要求发布代码 - （我使用的是 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>
回答by Zim
Bootstrap 4.1
引导程序 4.1
There is a new "display" option that disables popper.js dropdown positioning. Use data-display="static"to prevent popper.js from dynamically changing the dropdown position...
有一个新的“显示”选项可以禁用 popper.js 下拉定位。使用data-display="static"以防止popper.js从动态变化的下拉列表中的位置？
Bootstrap 4.0
引导程序 4.0
There are some issues with popper.jsand positioning.
popper.js和定位存在一些问题。
I've found the solution is to position-relativethe .dropdown, and set it as the data-boundary=""option in the dropdown toggle:
https://www.codeply.com/go/zZJwAuwC5s
我已经找到了解决办法是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>
The boundaryis set to the idof the dropdown. Read more about data-boundary.
该boundary设置为id下拉的。阅读有关数据边界的更多信息。
相关问题：
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?Bootstrap 4：为什么不显示可滚动下拉列表中的弹出窗口？
Scrolling a dropdown in a modal in Bootstrap4在 Bootstrap4 的模式中滚动下拉菜单
回答by Dominique
I achieved this in Bootstrap 4.3.1 by adding data-flip="false"to the dropdown element.
我通过添加data-flip="false"到下拉元素在 Bootstrap 4.3.1 中实现了这一点。
ex:
<a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>
前任：
<a href="#" id="drop2" data-toggle="dropdown" data-flip="false">dropdown</a>
回答by Karl Johan Vallner
ZimSystems got it almost right in Bootstrap 4.1. To disable the dropdown changing direction while open, aka. it's x-placement="bottom-end", you should use the "flip" option, instead of the "display" option.
ZimSystems 在 Bootstrap 4.1 中几乎是正确的。打开时禁用下拉更改方向，也就是。它是 x-placement="bottom-end"，您应该使用“翻转”选项，而不是“显示”选项。
Display static disables the positioning entirely, while flip only disables the LIVE checks, that flip the dropdown upside down, when you scroll towards the top of the screen.
Display static 完全禁用定位，而 flip 仅禁用 LIVE 检查，当您向屏幕顶部滚动时，将下拉菜单倒置。
