头像下拉框必须用 dropdown-menu-end 并满足三个硬性条件：.dropdown 是 navbar-collapse 的直接子元素；.dropdown-menu 是 .dropdown 的直接子元素；外层容器需 d-flex ms-auto。data-bs-toggle="dropdown" 必须写在触发元素上，且 Bootstrap 5 JS 和 Popper 需正确引入。
头像下拉框能加，但必须用 dropdown-menu-end + 正确 DOM 结构，否则右对齐失效、移动端错位、点击无响应——光改 class 没用。
头像下拉框的 HTML 结构必须满足三个硬性条件
Bootstrap 5 的 dropdown-menu-end 不是“加了就右对齐”，它依赖严格的父级关系和 flex 上下文：
-
.dropdown必须是<div class="collapse navbar-collapse">的**直接子元素**，不能嵌在<ul class="navbar-nav">里 -
.dropdown-menu必须是.dropdown的**直接子元素**，中间不能有<div>或其他包装 - 包裹
.dropdown的外层容器（比如<div>）必须带d-flex ms-auto，否则“右对齐”基准是整个 navbar 宽度，不是头像按钮本身
data-bs-toggle="dropdown" 必须写在触发元素上，且 JS 已加载
常见失效：头像按钮点了没反应。原因几乎全是这个属性漏了或写错：
- 必须是
data-bs-toggle="dropdown"（Bootstrap 5），不是data-toggle="dropdown"（那是 v4） - 必须加在触发元素上，比如
<button>或<a>，不能只加在<li>或外层<div> - 确保 Bootstrap 的 JS 和 Popper 已正确引入（CDN 顺序不能错：
bootstrap.bundle.min.js或分开引popper.min.js+bootstrap.min.js）
头像图片对齐和点击热区要手动优化
直接塞 <img> 进 .dropdown-item 会下沉、点击难中：
- 给头像
<img>加class="align-middle me-2"，解决基线对齐导致的视觉下沉 - 给
a.dropdown-item加py-2，把上下 padding 拉到至少 1rem，提升触摸设备点击命中率 - 头像尺寸建议设
height="2rem"（或24px），避免过小（ - 别用
display: flex包裹文字——会破坏:focus样式和屏幕阅读器识别
移动端折叠后下拉菜单偏移？检查 .navbar-collapse 是否被污染
小屏展开时下拉菜单飞到左边或顶部，90% 是因为结构层级断了：
- 确认所有导航项（包括头像
.dropdown）都是<div class="collapse navbar-collapse">的**直接子元素**，不要包在自定义<div class="my-nav-right">里 - 删掉
.navbar-collapse上的text-center或justify-content-center——它默认是flex-start，加了反而覆盖ms-auto - 不要给
.dropdown加dropend：那是横向弹出，和头像下拉的“向下+右对齐”需求冲突；dropdown-menu-end和dropend互斥
真正容易被忽略的是：Navbar 内部的 flex 布局会让 text-align 或 justify-content 对下拉菜单本身完全无效——对齐逻辑只发生在 .dropdown 和它的触发按钮之间，别的地方调不对。
