dropdown-menu-end是bootstrap 5中实现下拉菜单右对齐的唯一正确类名，它让菜单右边缘对齐触发按钮右边缘，不改变向下弹出方向；若失效，主因是结构错误：dropdown必须与.navbar-nav同级置于.navbar-collapse内，.dropdown-menu须为.dropdown直接子元素，外层需加.d-flex.ms-auto，且触发元素须嵌套在.nav-item中并含data-bs-toggle="dropdown"属性。
dropdown-menu-end 是右对齐的唯一正确类名
Bootstrap 5 中 dropdown-menu-right 已被彻底移除，写了也无效。真正起作用的是 dropdown-menu-end，它不改变弹出方向（仍是向下），只让菜单右边缘对齐触发按钮右边缘。
常见失效不是样式没加载，而是结构错位：
• dropdown-menu 必须是 dropdown 的**直接子元素**，中间不能插 <div> 或 <code><form></form>
• dropdown 不能塞在 <ul class="navbar-nav"></ul> 里，得和它同级，都放在 <div class="collapse navbar-collapse"> 内部<br>
• 外层容器必须加 <code>d-flex ms-auto，否则 dropdown-menu-end 对齐的是整个 navbar 右边界，不是按钮本身
• 触发元素必须是 <a></a> 或 <button></button>，且嵌套在 <li class="nav-item"> 中，否则 Popper 锚点错位
dropup / dropend / dropstart 控制弹出方向
想让菜单向上、向右或向左弹出，必须把方向类加在最外层容器上（即 dropdown 所在元素），而不是加在 dropdown-menu 上。
具体用法：
• 向上弹出：把 <div class="dropdown"> 改成 <code><div class="dropup">
<br>
• 向右弹出（横向）：改成 <code><div class="dropend">，此时菜单左边缘对齐按钮右边缘<br>
• 向左弹出：改成 <code><div class="dropstart">
<br>
• 这些类互斥，<code>dropup 和 dropend 不能共存，也别和 dropdown-menu-end 混用
漏掉 data-bs-toggle="dropdown" 属性会导致 JS 不初始化，方向类完全不生效。
移动端折叠后下拉菜单错位怎么办
小屏下菜单偏左、悬空或被截断，根本原因是 dropdown-menu 默认以 viewport 为定位参考，而非 navbar-collapse 容器。
修复要点：
• 给 dropdown 的父元素（如 <li class="nav-item dropdown">）加 position: relative
• 在 dropdown-menu 上同时加 dropdown-menu-end 和 data-bs-popper="static"
• 删掉任何针对移动端写的 @media 里手动设 top: 100% 的规则——这会干扰 Popper 计算
• 确保所有导航相关元素（包括右对齐的 dropdown）都是 navbar-collapse 的**直接子元素**，不要包在自定义 <div> 里
<h3>文字对齐和间距要单独处理</h3>
<p><code>dropdown-menu-end 只管水平位置，不影响内部文字对齐。文字左/右/居中需在 dropdown-menu 上加工具类：
• text-start（默认，通常不用显式加）
• text-end：适合“退出”“设置”等操作项靠右
• text-center：常用于语言切换类导航
• 别加在 dropdown 容器上，否则影响布局而非文字
• 若文字没按预期对齐，检查是否嵌套了多余 <div> 或用了非语义化标签，打断了 <code>text-align 继承链
菜单项间距调整优先用工具类：
• 单项调：给 <li> 加 py-2、px-3
• 分隔线调：用 my-3 替代默认的 .5rem margin
• 别用 mb-0 去“取消”最后一项下边距——dropdown-menu 自身有 padding，控制的是项内留白
