Drop down menu 强制引导下拉菜单始终显示在底部，并允许其脱离屏幕

当视口底部没有空间容纳下拉菜单时，它将显示在其下拉按钮的顶部。是否可以改变此行为并使下拉列表始终显示在底部

    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

下拉按钮

我想单独用CSS解决这个问题

Bootstrap的下拉菜单使用Popper.js定位下拉菜单。这使得任务具有挑战性，因为Popper.js似乎在滚动窗口时检查和评估下拉列表的位置，所以我需要使用

！重要信息

覆盖Popper.js的规则

下面是我根据您的示例提出的代码

.dropdown-menu{
    transform: translate3d(5px, 35px, 0px)!important;
}

代码笔示例：

---

这将始终强制下拉列表位于按钮下方，即使按钮位于屏幕底部。

Bootstrap 4使用Popper.js定位下拉列表。此外，引导程序4允许您通过一些

需要调整的选项是Popper.js的

flip

选项。默认情况下，Bootstrap 4将其设置为

true

，当视口底部没有足够空间时，会导致下拉切换元素上方出现下拉列表

要强制下拉列表始终显示在底部，请添加

data flip=“false”

作为

下拉切换

元素的属性。例如：

下拉按钮

用于引导≥ 4.1 通过在

下拉开关

元素（按钮或链接）上设置

data display=“static”

，完全禁用Popper.js动态定位

发件人：

默认情况下，我们使用Popper.js进行动态定位。使用静态禁用此功能

.window{
高度：8em；
溢出：自动；
边缘：1米；
填充：1em；
边框：10px实心#DFEAF2；
}

带有数据显示的下拉切换=“静态”

在引导中≥ 4.1您可以通过设置数据属性

data display=“static”

完全禁用Popper.js动态定位，请参见完全禁用Popper.js将打破下拉定位。因此，下拉列表可能不会显示在下拉按钮下方。