如何在 Bootstrap 5 中制作可滚动的下拉菜单？

Question

我见过一些很棒的下拉菜单代码示例，您可以滚动浏览，但遗憾的是大多数代码示例不适用于 Bootstrap 5。有没有任何现代方法可以做到这一点？

Answer 1

您的意思是菜单的固定高度吗？

HTML：

<div class="container">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click on Me
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</div>

CSS：

.dropdown-menu {
  max-height: 100px;
  overflow-y: scroll;
}