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