Bootstrap 导航栏二级菜单最大高度与滚动条-Bootstrap教程-PHP中文网

二级菜单内容超长被截断的根本原因是.dropdown-menu的max-height值写死（如300px）且未适配实际内容高度，需用高权重CSS覆盖为足够大的像素值并确保overflow-y: auto生效，同时排查父级overflow:hidden干扰及移动端touch事件影响。

二级菜单内容超长时被截断，根本不是 overflow:hidden 的锅

bootstrap 5 默认对 .dropdown-menu 设置了 max-height: 300px（部分版本或主题中为 200px），并配合 overflow-y: auto。但问题常出在：这个 max-height 值写死在 css 里，且未考虑子项实际高度、行高、padding 或字体加载延迟——导致菜单展开后底部内容“消失”，滚动条也不出现。

常见错误现象包括：

鼠标滚轮无效，页面整体滚动而非菜单内滚动
菜单底部几项完全不可见，Inspect 元素发现它们被父容器裁剪
加了 overflow-y: scroll 没反应，因为父级 .dropdown-menu 自身高度没撑开

真正要动的是 .dropdown-menu 的高度约束逻辑，而不是盲目套 overflow。

覆盖 max-height 并确保 overflow-y 生效的最小改动

Bootstrap 5.3+ 中，.dropdown-menu 的高度限制来自内置规则：max-height: 300px; overflow-y: auto;。直接在 HTML 上加 style="max-height: 400px" 会被原生 CSS 覆盖（因 specificity 不够）。

推荐做法是用带足够权重的选择器显式重置：

给需要滚动的二级菜单加专属 class，例如 class="dropdown-menu-scrollable"

在自定义 CSS 中写：

.dropdown-menu-scrollable {
  max-height: 350px !important;
  overflow-y: auto;
}

避免用 vh 单位（如 80vh），移动端键盘弹出时视口高度突变，会引发菜单突然收缩
若菜单含下拉项（如三级入口），需额外确保子 .dropdown-menu 不继承父级 max-height，可用 .dropdown-menu-scrollable .dropdown-menu { max-height: none; }

滚动条样式不显示？检查是否被父级 overflow 隐藏

即使设置了 max-height 和 overflow-y: auto，滚动条仍不出现，大概率是上层容器（比如 .navbar-collapse 或某个 .nav-item）也设置了 overflow: hidden 或 max-height，把整个 dropdown 区域裁掉了。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

快速排查步骤：

在浏览器 DevTools 中选中二级菜单最外层 <ul class="dropdown-menu"></ul>，看 computed 样式里 overflow-y 是否为 auto，且 max-height 是你设的值
逐级向上检查父元素（.nav-item → .navbar-nav → .navbar-collapse），确认没有 overflow: hidden 或意外的 height/max-height
特别注意：如果用了 .dropdown-menu-end 或 data-bs-popper="static"，Popper.js 可能将菜单渲染到下，此时父级限制失效，但定位可能错位——这时滚动条能出，但位置飘了

移动端点击后滚动条卡住，本质是 touch 事件干扰

在 iOS Safari 或部分安卓 WebView 中，二级菜单首次展开后滚动卡顿、无法拖动，往往不是 CSS 问题，而是 touchstart / touchmove 事件被 Bootstrap 的 dropdown JS 拦截或未正确释放。

临时缓解方案（上线前应修复）：

给 .dropdown-menu-scrollable 加 -webkit-overflow-scrolling: touch;（仅 iOS 有效）
避免在菜单内放 input 或 textarea —— 它们触发软键盘后，视口重排常导致滚动容器高度重算失败
若必须支持表单，改用 position: static 让菜单随文档流展开（牺牲动画，但滚动可靠）：
```
.dropdown-menu-scrollable {
  position: static !important;
  max-height: none;
  overflow-y: visible;
}
```

真正稳定的滚动体验，依赖于菜单容器脱离 Popper 动态定位、回归文档流高度计算——这点容易被忽略，但决定了用户能否顺畅浏览长列表。