Bootstrap 5 下拉菜单不会自动上翻，需显式添加 dropup 类或配置 Popper；dropdown-menu-end 依赖正确定位容器，CSS 无法自动感知视口边界，须用 JS 结合 getBoundingClientRect() 和 requestAnimationFrame 动态修正。
下拉菜单超出屏幕底部时不自动上翻？Bootstrap 5 默认不干这事
Bootstrap 5 的 .dropdown-menu 不会自动检测空间不足并翻转方向——它只按你写的类（如 dropup）或 Popper 配置执行。所谓“自动反向”是常见误解，实际行为取决于是否显式启用 fallback 策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给触发容器（即最外层
<div class="dropdown">）加dropup类，它会强制菜单向上展开，并自动翻转箭头和锚点逻辑 - 如果同时需要右对齐，就在
.dropdown-menu上额外加dropdown-menu-end，不要加dropend（那是横向弹出） - 别依赖
:hover在移动端触发dropup：触屏设备无稳定 hover 状态，必须用 click 或focus-within配合 JS 控制显隐 - 检查
.dropdown的直接父级是否带position: relative，否则 Popper 可能锚定到body，导致dropup失效
纯 CSS 能不能让下拉菜单“感知”视口边界？不能，但可以兜底
CSS 本身无法读取 window.innerWidth 或调用 getBoundingClientRect()，所以“自动判断+反向”必须靠 JS。不过 CSS 可以提供安全边界和弹性收缩，避免完全不可见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.dropdown-menu设max-height: 80vh和overflow-y: auto，防止内容撑高后底部被裁切 - 用
width: clamp(200px, 95%, 400px)替代固定宽度，小屏留边、大屏限宽 - 避免在父容器上写
overflow: hidden——它会直接截断菜单，而不是触发翻转；真要裁剪，应移到视觉区域（如 logo 区），而非整个导航栏 -
contain: layout paint加在定位容器上，可减少因位置重算引发的 layout thrashing，尤其在频繁 resize 时
为什么加了 dropdown-menu-end 还是飘到屏幕右边？定位容器错了
dropdown-menu-end 只控制“右边缘对齐”，前提是它的定位参考容器（即 Popper 的 offsetParent）是预期的那个元素。如果参考容器是 <ul class="navbar-nav">（默认无 position: relative），菜单就会被塞到整个导航栏最右端，而不是按钮右侧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<div class="dropdown">移出<ul class="navbar-nav">，放到<div class="navbar-collapse">内部、</ul>之后 - 确保其**直接父容器**有
d-flex ms-auto（不是加在.dropdown自身上），这样才能让触发按钮浮到右上角 - 删掉任何手动写的
style="top: 100%"或transform，这些会被 Popper 覆盖，反而干扰重定位 - 触发按钮必须是
<button class="btn">或包裹在<div class="nav-item">里，否则 Popper 找不到语义锚点
JS 动态修正位置时最容易忽略的三个点
用 getBoundingClientRect() 做边界判断很可靠，但落地时几个细节常被跳过，导致修正失效或抖动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别在元素
display: none时读offsetWidth/offsetHeight——值为 0，改用getBoundingClientRect()，它返回布局后的实际尺寸 - 修正逻辑必须在 layout 完成后执行：用
requestAnimationFrame包裹计算，而不是同步设置top/left - 监听
scroll和resize事件时做节流（throttle），避免每像素滚动都触发重排；首次显示时执行一次即可，后续仅在窗口尺寸突变时重校准
