强制Bootstrap下拉菜单始终显示在底部并使其脱离屏幕 [英] Force Bootstrap dropdown menu to always display at the bottom and allow it go offscreen

问题描述

如果视口底部没有可容纳下拉菜单的空间，它将显示在其下拉按钮的顶部.是否有可能改变这种行为并使下拉菜单始终显示在底部?

    <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似乎在滚动窗口时检查并评估下拉菜单的位置，因此我需要使用!important规则来覆盖Popper.js.

这是根据您的示例得出的代码.

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

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

这将始终使下拉列表位于按钮下方，即使该按钮位于屏幕底部也是如此.

When there is no room at the bottom of the viewport to fit dropdown menu, it is displayed at the top of its dropdown button. Is it possible alter this behavior and make dropdown always appear at the bottom?

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

解决方案

I wanted to tackle this problem with CSS alone.

Bootstrap's dropdown's uses Popper.js for the positioning of the dropdown menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.

Here's the code I came up with, based on your example.

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

Example codepen: https://codepen.io/Washable/pen/xPdqVp

This will always force the dropdown to be below the button, even if the button is at the bottom of the screen.

这篇关于强制Bootstrap下拉菜单始终显示在底部并使其脱离屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！