如何在引导程序 5 中制作可滚动的下拉菜单？ [复制]答案

【问题标题】：How to make a scrollable dropdown menu in bootstrap 5? [duplicate]如何在引导程序 5 中制作可滚动的下拉菜单？ [复制]
【发布时间】：2021-07-04 18:14:15
【问题描述】：

我已经看到了一些很棒的下拉菜单代码示例，您可以滚动浏览，但遗憾的是大多数代码示例不适用于 bootstrap 5。有什么现代方法可以做到这一点吗？

【问题讨论】：

请发布您尝试过的代码。 Bootstrap 5 中没有任何影响下拉菜单滚动的变化。

标签： javascript html css bootstrap-5

【解决方案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;
}

【讨论】：

【解决方案2】：

你可以试试下面的 CSS 来获得可滚动的下拉菜单。您可以在此处设置max-height: 100vh，将其限制为视口高度的 100%。所以，它会很好地显示在任何视口中。

不要忘记从calc(100vh - 150px) 中减去标题高度。 150px 是我网站示例中标题的高度。您可以根据您的网站进行更换。高于下拉菜单的高度。

.dropdown-menu {
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 150px);
}

【讨论】：