Force Bootstrap下拉菜单始终显示在底部并允许它在屏幕外显示

Question

当视口底部没有空间来容纳下拉菜单时,它会显示在其下拉按钮的顶部.是否有可能改变此行为并使下拉列表始终显示在底部？

    <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>

Answer 1

对于Bootstrap≥4.1

完全禁用Popper.js通过设置动态定位data-display="static"于dropdown-toggle元件(按钮或链接).

来自Bootstrap Docs>下拉菜单:选项:

默认情况下,我们使用Popper.js进行动态定位.使用static禁用它.

.window {
  height: 8em;
  overflow: auto;
  margin: 1em;
  padding: 1em;
  border: 10px solid #DFEAF2;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="window">
  <div class="dropdown">
    <button data-display="static" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown dropdown-toggle with data-display="static"
    </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>
      <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>
</div>

Answer 2

Bootstrap 4使用Popper.js来定位下拉列表.此外,Bootstrap 4允许您传递一些data-*属性来控制该下拉列表中Popper.js的行为.

需要调整的flip选项是Popper.js 的选项.默认情况下,Bootstrap 4将此设置为true,当视口底部没有足够的空间时,会导致下拉菜单元素上方显示下拉列表.

要强制下拉列表始终显示在底部,请添加data-flip="false"为dropdown-toggle元素的属性.例如:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-flip="false" 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>

Answer 3

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

Bootstrap的下拉列表使用Popper.js来定位下拉菜单.这使得任务具有挑战性,因为当滚动窗口时,Popper.js似乎检查并评估下拉列表的位置,因此我需要使用!important规则来覆盖Popper.js.

根据您的示例,这是我提出的代码.

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

示例代码:https://codepen.io/Washable/pen/xPdqVp

这将始终强制下拉菜单位于按钮下方,即使按钮位于屏幕底部.