Bootstrap 4 Dropdown-禁用由popper.js引起的自动放置

维斯瓦斯

我正在使用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的更多信息


相关问题:
引导程序4:为什么可滚动下拉菜单中的弹出窗口没有显示?
在Bootstrap4中的模式中滚动下拉菜单

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用JQuery后禁用Bootstrap 4 Dropdown

Bootstrap 4 / Popper.js干扰自动建议

Angular 4 Bootstrap下拉列表需要Popper.js

如何在Bootstrap 4 Beta中使用Popper.js

如何使用Bootstrap 4安装popper.js?

Bootstrap 4 Beta-是否需要Popper.js?

Bootstrap 4 Dropdown不起作用

Bootstrap 4 Toggler Dropdown没有背景

Bootstrap 4 Popper未定义

带有Aurelia CLI和Require.js的Bootstrap 4错误“ Bootstrap下拉列表需要Popper.js”

使用Webpack 3.x导入Popper.js的Bootstrap 4 Beta抛出Popper不是构造函数

Bootstrap 4中的居中对齐Dropdown组件无法正常工作

Bootstrap 4 Dropdown菜单悬停在Jquery上

Bootstrap 4 Dropdown在Laravel中不起作用-Vue Spa

设置工具提示的样式(popper.js / bootstrap v4 beta)

如何使用Angular 6安装bootstrap 4 + jquery + popper.js

如何使用 Browserify / Gulp 要求 Bootstrap 4 依赖项(jQuery 和 Popper.js)

使用自动放置作为后备的Bootstrap 4工具提示/弹出窗口(两个放置值)

Bootstrap 4,Popper.JS和WebPack -“导入和导出可能仅与sourceType:module一起出现”

在 Bootstrap 4 中禁用列换行

Bootstrap和Popper的WordPress JS加载问题

Bootstrap4:并排放置卡?

Bootstrap Dropdown样式

Angular JS停止从Bootstrap“ dropdown-toggle”事件传播

bootstrap 4导航栏折叠不起作用(使用jQuery-popper-bootstrap

Bootstrap 4 Dropdown Navbar用Plus和Minus Fontawesome 5更改插入符号

更改bootstrap 4 dropdown-menu选项以显示和隐藏html中的div

Rails 4 Bootstrap3 Dropdown起作用,然后不起作用

ngx-bootstrap/dropdown 不适用于 angular4 和 [email protected]