Dropdown向上弹出需将最外层容器由.dropdown改为.dropup，Popper自动翻转定位；.dropend和.dropstart同理作用于最外层，控制整体弹出方向，不可混用。
Dropdown 向上弹出用 .dropup，必须加在最外层容器上
想让菜单从按钮顶部向上展开，不是加在 .dropdown-menu 上，也不是套一层 <div class="dropup"> 包住菜单——而是直接把最外层的 <code><div class="dropdown"> 换成 <code><div class="dropup">。popper 会自动翻转定位逻辑：菜单顶部对齐按钮底部，箭头也自动上翻。
<p>常见错误：</p>
<ul>
<li>写成 <code><div class="dropdown"><div class="dropup">...</div></div> —— 完全无效
data-bs-toggle="dropdown" —— JS 不初始化，方向类不生效.dropdown-menu 不是 .dropup 的直接子元素（中间插了 <div> 或其他包装）—— Popper 找不到 reference 元素
<h3>向右或向左弹出分别用 <code>.dropend 和 .dropstart
.dropend 让菜单整体移到按钮右侧展开，.dropstart 则移到左侧；两者都作用于最外层容器，且互斥——不能同时加在一个元素上。
注意：.dropend 和 .dropstart 控制的是“弹出方向”，不是“菜单内部文字对齐”。有人误以为加了 .dropend 就能让菜单右对齐按钮，其实它只是把整个菜单往右平移，并默认左边缘对齐按钮右边缘（即“贴着按钮右边往右伸”或“往左伸”）。
所以：
- 不需要再给
.dropdown-menu加.dropdown-menu-end（那是用于向下展开时的右对齐） - 不要手动加
style="left: ..."或transform—— Popper 会覆盖并破坏响应式重定位 - Bootstrap 4 的
.dropleft已废弃，Bootstrap 5 统一用.dropstart
导航栏里右对齐下拉菜单，只加 .dropdown-menu-end 不够
在 <nav class="navbar"></nav> 里，光给 .dropdown-menu 加 .dropdown-menu-end 很可能没反应，或者对齐到整个 navbar 右边界，而不是按钮本身。
真实有效的做法是三步走：
- 把整个
<div class="dropdown"> 移出 <code><ul class="navbar-nav"></ul>，放到<div class="navbar-collapse"> 内部、但 <code>之后 - 给这个
<div class="dropdown"> 的父容器加 <code>d-flex ms-auto，利用 navbar 的 flex 布局把它推到最右侧 -
.dropdown-menu上只加.dropdown-menu-end，保持向下展开，但右边缘对齐触发按钮右边缘 - 触发按钮是否带
data-bs-toggle="dropdown"—— 注意是bs，不是旧版data-toggle -
.dropdown-menu是否为.dropup/.dropend元素的**直接子元素** - 是否用了 JS 动态插入 DOM？如果是，需手动调用
bootstrap.Dropdown.getOrCreateInstance(el)初始化 - 浏览器控制台报
Uncaught Error: Popper: "reference" is not a valid selector？说明 Popper 找不到锚点元素，大概率是结构嵌套过深或缺少语义化标签
如果按钮是裸 <button></button>，不是嵌在 <li class="nav-item"><a class="nav-link"></a></li> 里，Popper 锚点会错位，.dropdown-menu-end 也会失效。
为什么方向类加了没反应？90% 是结构或初始化问题
不是 CSS 没加载，也不是类名拼错（.dropup 不是 .drop-up），而是 Bootstrap 5 依赖 Popper 和 data 属性协同工作。检查这几项：
方向类之间互斥，但可以和修饰类组合，比如 <div class="dropstart"><ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg"> —— 这种组合合法，但别试图混用 <code>.dropup 和 .dropend。
