我正在使用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>
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
下拉的。阅读有关data-boundary的更多信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句