窄屏下拉菜单被截断或撑出滚动条的根本原因是 .dropdown-menu 默认 min-width 与窄屏父容器宽度冲突，应改用 max-width + width: max-content 组合，并通过 CSS 变量或媒体查询动态控制，避免 width: 100% 导致塌缩。
窄屏下下拉菜单被截断或撑出滚动条
根本原因是 .dropdown-menu 默认设了 min-width: 10rem（Bootstrap 5.3+ 是 120px），而窄屏（如手机竖屏 ≈390px 宽）下父容器（.navbar-nav 或 .dropdown）宽度受限，菜单强行保持最小宽度就溢出边界，触发横向滚动或被裁剪。
- 别碰
width: 100%—— 它会让菜单在大屏也死板贴边，失去弹性 - 优先用
max-width+width: max-content组合：既允许内容撑开，又防过宽 - 若需统一宽度（比如所有菜单都不超 280px），直接覆盖
min-width和max-width：
@media (max-width: 991.98px) {
.dropdown-menu {
min-width: auto;
max-width: 280px;
width: max-content;
}
}
用 CSS 变量动态控制 dropdown-menu 宽度（v5.2+）
Bootstrap 5.2 起支持 --bs-dropdown-min-width 变量，比硬写媒体查询更干净，尤其适合主题切换或运行时调整。
- 变量只影响
min-width，不控制max-width，仍需配合媒体查询或 JS 控制上限 - 必须作用于
.dropdown或.dropdown-menu的父级容器上才生效（因为是继承变量） - 例如在窄屏下把最小宽度压到
8rem：
@media (max-width: 991.98px) {
.navbar-nav .dropdown {
--bs-dropdown-min-width: 8rem;
}
}
为什么直接写 .dropdown-menu { width: 100% } 会失败
这不是语法错误，而是逻辑冲突：.dropdown-menu 默认是 position: absolute，脱离文档流后，width: 100% 参照的是最近的「定位上下文」（通常是 .dropdown），而后者在窄屏下往往没显式设宽 —— 结果就是 100% 计算为 0 或极小值，菜单塌缩成一条线。
- 查 DOM：用浏览器 DevTools 看
.dropdown是否有position: relative（必须有，否则定位错乱） - 避免加
!important强行覆盖，它会破坏大屏下的默认行为 - 真正可靠的方案是放弃
width: 100%，改用width: max-content+left: 0/right: 0手动对齐
导航栏内搜索框与下拉菜单共存时的宽度挤压
当 .navbar-nav 里同时有 .dropdown 和 .input-group，窄屏下 flex 容器空间不足，两者会互相挤压。常见现象是下拉菜单变窄、搜索框文字换行或按钮错位。
立即学习“前端免费学习笔记（深入）”；
- 给
.dropdown加flex-shrink: 0，防止被 flex 压缩（Bootstrap 5 已内置flex-shrink-0类） - 确保搜索框外层包了
.input-group，且内部.form-control有flex-grow-1和min-width: 0 - 不要给
.dropdown设固定width，它应随内容自然伸缩；挤压问题本质是父容器.navbar-nav缺少flex-wrap: wrap或overflow: visible
min-width）、明确参照系（用 max-content 而非 100%）、隔离干扰项（如搜索框的 flex 行为）。这些点漏掉任意一个，都会导致同一段 CSS 在不同设备上表现不一致。 
