应加 dropdown-menu-end 类实现右对齐，且 dropdown-menu 必须是 dropdown 的直接子元素，外层容器需加 d-flex ms-auto，触发元素须为 nav-item 内的 nav-link 或 button。
Navbar里下拉菜单想右对齐，该加哪个class
加 dropdown-menu-end，不是 dropdown-menu-right——后者在 Bootstrap 5 中已被彻底移除，写了也无效。这个类只改变水平对齐位置，不改变弹出方向：菜单依然向下展开，但右边缘会贴住触发按钮的右边缘。
常见失效原因全是结构问题，不是样式没加载：
-
dropdown-menu必须是dropdown的**直接子元素**，中间不能嵌套<div>或其他容器 -
dropdown不能塞在<ul class="navbar-nav">里面；得把它移出来，和ul.navbar-nav并列，都放在<div class="collapse navbar-collapse">内部 - 包裹
dropdown的外层容器要加d-flex ms-auto，否则dropdown-menu-end对齐的是整个 navbar 右边界，而不是按钮本身 - 触发元素必须是
<a class="nav-link">或<button>，且嵌套在<li class="nav-item dropdown">里，否则 Popper 锚点错位
想让菜单从右侧横向弹出（像侧边栏），怎么设
给最外层容器加 dropend 类，不是加在 dropdown-menu 上，而是替换 dropdown：把 <div class="dropdown"> 改成 <div class="dropend">。这时菜单会从按钮右侧横向展开，左边缘默认对齐按钮右边缘。
注意别混用：
-
dropend和dropdown-menu-end互斥，不能同时加——前者改方向，后者改对齐，逻辑冲突 -
dropend和dropup也不能共存 - 别再写
style="left: 200px"或transform：Popper 会覆盖这些，导致移动端闪烁或错位 - 导航栏里用
dropend时，确保父级是nav-item结构，否则 flex 布局可能挤压菜单宽度
菜单总往上跑、被截断，是不是该用dropup
是，但得加对地方：dropup 必须作用于最外层容器，也就是把 <div class="dropdown"> 换成 <div class="dropup">。Popper 会自动翻转锚点逻辑，让菜单顶部对齐按钮底部，并把箭头翻上去。
常见踩坑点：
- 漏掉
data-bs-toggle="dropdown"属性——JS 不初始化，方向类完全不生效 -
dropdown-menu不是dropup的直接子元素（中间插了包装层）——Popper 找不到 reference 元素 - 移动端在屏幕底部触发时，
dropup能避免被截断，但 Popper 不会自动 fallback，需 JS 检测空间后手动切换 class - 别给
dropdown-menu加top: 100%：这和data-bs-popper="popper"冲突，会导致折叠态错位
移动端折叠后下拉菜单错位，怎么修
根本原因是折叠状态下 dropdown-menu 默认以 viewport 为参考定位，而不是 navbar-collapse 容器。修复重点不在菜单本身，而在父容器环境：
- 给
dropdown的父元素（如<li class="nav-item dropdown">）加position: relative——Bootstrap 默认没设，必须手动补 -
dropdown-menu上显式加dropdown-menu-end和data-bs-popper="static"，禁用 Popper 自动 top/left 计算 - 删掉任何针对移动端写的
@media (max-width: 991.98px) { .dropdown-menu { top: 100% } }——这会让菜单往上跑，反而溢出顶部 - 检查
navbar-collapse是否被自定义<div>包裹：所有导航相关元素（包括右对齐的dropdown）必须是它的**直接子元素**，否则 flex 上下文就断了
真正卡住的点往往不是 class 写错了，而是 navbar-collapse 的 DOM 层级被干扰，或者 data-bs-target 指向了错误的 collapse 容器。
