强制Bootstrap下拉菜单始终显示在底部并使其脱离屏幕

这将始终使下拉列表位于按钮下方，即使该按钮位于屏幕底部也是如此.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/xPdqVpThis will always force the dropdown to be below the button, even if the button is at the bottom of the screen. 这篇关于强制Bootstrap下拉菜单始终显示在底部并使其脱离屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！