Bootstrap 5 下拉方向控制必须作用于最外层容器：向上用 .dropup，向右用 .dropend，向左用 .dropstart；需确保 data-bs-toggle="dropdown" 存在、.dropdown-menu 为直接子元素，且避免内联样式或错误嵌套。
直接改最外层容器的 class 就行，不是改 .dropdown-menu，也不是加内联样式——bootstrap 5 的方向控制全靠语义类，且必须作用于包裹整个结构的顶层元素。
向上弹出用 .dropup，必须替换最外层容器
想让菜单从按钮顶部向上展开，把 <div class="dropdown"> 改成 <code><div class="dropup">。Popper 会自动翻转定位逻辑：菜单顶部对齐按钮底部，箭头也自动上翻。
<ul>
<li>错误写法：<code><div class="dropdown"><div class="dropup">...</div></div> —— 完全无效
data-bs-toggle="dropdown" —— JS 不初始化，方向类不生效.dropdown-menu 不是 .dropup 的直接子元素（中间插了 <div>）—— Popper 找不到 reference 元素
<li>移动端在屏幕底部触发时，<code>.dropup 能避免被截断，但 Popper 不会自动 fallback，需 JS 检测空间后手动切换 class向左或向右弹出用 .dropstart 或 .dropend
这两个类控制的是“弹出方向”，不是“菜单内部文字对齐”。.dropend 把整个菜单移到按钮右侧，默认左边缘对齐按钮右边缘；.dropstart 同理向左移，左边缘对齐按钮右边缘。
- 不能同时加
.dropstart和.dropend—— 互斥 - 别再给
.dropdown-menu加.dropdown-menu-end—— 这是向下展开时的右对齐，和.dropend冲突 - 不要手动写
style="left: ..."或transform—— Popper 会覆盖并破坏响应式重定位 - Bootstrap 4 的
.dropleft已废弃，统一用.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，保持向下展开，但右边缘对齐触发按钮右边缘 - 触发按钮必须是
<a class="nav-link"></a>或嵌套在<li class="nav-item">里 —— 裸<button></button>会导致 Popper 锚点错位
最容易被忽略的是：方向类是否生效，90% 不是 CSS 没加载，而是 DOM 结构松散或 JS 初始化缺失。检查 data-bs-toggle="dropdown" 是否存在、.dropdown-menu 是否为最外层容器的直接子元素、以及是否在动态插入后手动调用 bootstrap.Dropdown.getOrCreateInstance()。
