dropdown-menu-end无效的根本原因是缺乏定位上下文，需确保.dropdown的直接父容器设position: relative，并将.dropdown移出<ul class="navbar-nav">置于.navbar-collapse内，配合d-flex ms-auto和语义化DOM结构。
直接加 dropdown-menu-end 不管用，是因为它只控制对齐方式，不解决定位容器缺失或空间不足问题。真正起作用的是三层配合：结构、定位上下文、Popper 锚点。
为什么 dropdown-menu-end 加了也没效果
这个类只让 .dropdown-menu 的右边缘对齐其“定位容器”的右边缘。但如果你的 .dropdown 直接放在 <ul class="navbar-nav"> 里，而 <ul> 没设 position: relative，Popper 就会退回到 body 当定位参考——菜单就飘到整个视口最右边，而不是按钮右侧。
-
.dropdown必须是<div class="navbar-collapse">的直系子元素，不能塞进<ul class="navbar-nav">内部 - 触发器必须是
<a>或<button>，且包裹在<div class="nav-item">里，否则 Popper 找不到语义锚点 - 手动写的
style="right: 0"或transform会被 Popper 覆盖，反而导致移动端错位
必须确保 .dropdown 的父容器有 position: relative
Bootstrap 5 的下拉依赖 Popper 定位，而 Popper 需要一个明确的定位上下文。如果 .dropdown 的最近定位祖先不是自己，它就会往上找，直到 body —— 这是溢出的根源。
- 给
.dropdown的**直接父容器**加position: relative（常见于<div class="navbar-collapse">） - 不要只靠
dropdown-menu-end，它不提供定位上下文，只负责对齐 - 检查 DevTools 中
.dropdown-menu的transform和left/top值是否被 Popper 动态重写；如果是，说明定位上下文没生效
右侧按钮+右对齐菜单的真实写法
目标是：用户头像按钮靠 navbar 最右，点击后菜单右边缘与按钮右边缘平齐。这不是靠 dropend，而是布局 + 定位 + 对齐三者协同。
立即学习“前端免费学习笔记（深入）”；
- 把
<div class="dropdown">移出<ul class="navbar-nav">，放到<div class="navbar-collapse">内部、</ul>之后 - 给该
dropdown容器加d-flex ms-auto（利用 navbar 的 flex 布局将其推至右侧） -
.dropdown-menu上只加dropdown-menu-end，不加dropup、dropend或任何手写style - 若菜单仍向右偏移，检查是否误用了已废弃的
dropdown-menu-right（Bootstrap 5 中不存在）
最容易被忽略的是：所有方向类都依赖语义化 DOM 结构。一旦 .dropdown 被嵌套在非预期容器中（比如套在 <li> 里又没设 position: relative），Popper 就失去锚点，dropdown-menu-end 就成了无源之水。
