Bootstrap导航栏中下拉菜单无法滚动问题求助

这种情况太常见了——fixed定位的导航栏本身脱离了文档流，它的下拉菜单默认基于导航栏定位，当菜单选项过多、高度超过视口剩余空间时，就会被视口底部截断，没法滚动查看剩下的内容。别担心，只需要加几行CSS就能搞定，同时还能保持导航栏固定在顶部的特性。

具体解决方案： #

1. 给长下拉菜单添加自定义类
   先给那个包含32个选项的下拉菜单容器（也就是<div class="dropdown-menu">或<ul class="dropdown-menu">）加一个专属类，比如.long-dropdown，这样我们只针对这个长菜单设置样式，不会影响另一个短菜单。

示例HTML：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="longDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
    长下拉菜单
  </button>
  <ul class="dropdown-menu long-dropdown" aria-labelledby="longDropdownBtn">
    <!-- 32个选项示例 -->
    <li><a class="dropdown-item" href="#">选项1</a></li>
    <li><a class="dropdown-item" href="#">选项2</a></li>
    <!-- ... 更多选项 ... -->
  </ul>
</div>

2. 添加CSS样式实现滚动
   给这个自定义类设置最大高度和垂直滚动属性，最大高度用calc()计算，减去导航栏的高度，确保菜单不会超出视口范围。Bootstrap默认fixed-top导航栏的高度是56px，所以可以这么写：

.long-dropdown {
  max-height: calc(100vh - 56px); /* 视口高度减去导航栏高度，避免菜单超出视口 */
  overflow-y: auto; /* 垂直内容超出时自动显示滚动条 */
}

• 如果你的导航栏是自定义高度（比如70px），记得把56px改成实际的导航栏高度。
• overflow-y: auto只会在内容超出时显示滚动条，内容较短时不会出现多余滚动条，体验更友好。

额外提示： #

• 测试时可以调整浏览器窗口大小，验证不同屏幕高度下菜单的滚动表现。
• 如果菜单内有分组标题或分隔线，确保这些元素的样式不会被滚动截断，保持视觉连贯性。

这样设置后，你的长下拉菜单就能在不破坏导航栏固定定位的前提下，通过滚动查看所有选项啦！

内容的提问来源于stack exchange，提问作者pblanco4