小屏下.dropdown-menu向上溢出或被截断，根本原因是移动端.navbar-collapse.show展开后.nav-item位置尺寸变化导致锚点错位，且父容器overflow: hidden裁剪；须用@media (max-width: 1024px)覆盖样式，确保.navbar、.navbar-collapse.show、.nav-item.dropdown均设position: relative，并使.dropdown-menu绝对定位紧贴触发项底部，同时解除.overflow隐藏限制。
为什么小屏下.dropdown-menu会向上溢出或被截断
根本不是 JS 失效，而是 .dropdown-menu 仍按桌面端定位逻辑渲染：它依赖最近的 position: relative 祖先（通常是 .nav-item.dropdown），但在移动端 .navbar-collapse.show 展开后，整个导航变成垂直堆叠块，.nav-item 的位置和尺寸已变化，导致菜单锚点错位、顶部溢出或被 overflow: hidden 裁剪。
必须加的媒体查询覆盖样式（≤1024px）
直接在自定义 CSS 中添加以下规则（务必放在 Bootstrap CSS 之后）：
@media only screen and (max-width: 1024px) {
/* 让折叠容器成为独立定位上下文 */
.navbar {
position: relative;
}
/* 将 dropdown 容器设为 relative，提供可靠锚点 */
.navbar-collapse.show .nav-item.dropdown {
position: relative;
}
/* 强制菜单绝对定位，紧贴触发项底部 */
.navbar-collapse.show .dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
margin-top: 0 !important;
transform: none !important;
z-index: 1000;
}
/* 防止父级 overflow 裁剪 */
.navbar-collapse.show {
overflow: visible !important;
}
}
- 不加
@media会导致桌面端下拉也异常；用1024px是因多数平板横向临界点在此，比lg（992px）更稳妥 -
.navbar-collapse.show .nav-item.dropdown比单纯写.nav-item.dropdown特异性更高，避免覆盖桌面端行为 - 删掉所有对
#navbarSupportedContent或.collapse的display: block声明——它们会锁死 JS 控制流
结构上最容易被忽略的三点
再好的 CSS 也救不了错误的 DOM 层级。检查以下三项是否全部满足：
-
.dropdown必须是.navbar-collapse的**直接子元素**，不能嵌套在<ul class="navbar-nav"></ul>内部 -
.dropdown-menu必须是.dropdown的**直接子元素**，中间不能插<div> 或 <code><form></form>，否则 Popper 定位失效 -
data-bs-toggle="dropdown"必须出现在触发元素（如<button></button>或<a></a>）上，且该元素在 DOM 中存在、未被 JS 动态移除 -
.dropdown-menu-end只控制菜单内容相对于触发按钮的右对齐，**不移动按钮本身**；按钮要靠右，得靠外层.ms-auto在 flex 容器中推动 - 确保
.dropdown和<ul class="navbar-nav"></ul>并列，都放在.navbar-collapse下，且其父容器有display: flex - 别给
.navbar-collapse加text-center或justify-content-center，这会覆盖.ms-auto的右推效果
移动端右对齐下拉菜单失效怎么办
如果用了 .dropdown-menu-end 却没效果，问题几乎一定出在结构或容器上：
真正难调的不是样式，是那个“刚好差一层 wrapper”的 DOM 结构——浏览器开发者工具里多看一眼元素层级，比反复改 CSS 有效得多。
