dropup 类让菜单向上展开，必须作用于最外层 .dropdown 容器，即直接替换为 ，内部保留 .dropdown-menu 结构；它自动翻转定位并上翻箭头，与 .dropstart、.dropend 互斥但可组合对齐类。
Dropup 类让菜单向上展开，但必须作用于最外层 .dropdown 容器
Bootstrap 5 中 .dropup 是唯一控制“向上展开”的语义类，它会自动翻转菜单定位逻辑：菜单顶部对齐触发按钮底部，同时箭头图标也自动上翻。关键点在于——.dropup 必须加在包裹整个结构的最外层容器上，而不是 .dropdown-menu 或按钮上。
常见错误是写成：<div class="dropdown"><div class="dropup">...</div></div>，这完全无效；正确写法是直接替换为：<div class="dropup">，且内部仍保留 <code>.dropdown-menu 结构。
- 如果同时需要右对齐（比如按钮靠右，菜单向上且右贴边），在
.dropdown-menu上额外加.dropdown-menu-end -
.dropup和.dropend/.dropstart互斥，不能共存 - 移动端下拉菜单若在屏幕底部触发，
.dropup可避免菜单被截断，但需注意：Popper 不会自动 fallback，得靠 JS 检测空间后手动切类
Dropleft 类已废弃，正确写法是 .dropstart
Bootstrap 4 的 .dropleft 在 Bootstrap 5 中已被移除，现在统一使用 .dropstart。它会让菜单从触发按钮**左侧弹出**，且默认左边缘对齐按钮右边缘（即“贴着按钮右边往左伸”）。
容易混淆的是：有人误以为 .dropstart 是让菜单“左对齐自身”，其实它是定义弹出方向——菜单整体向左位移，并由 Popper 自动锚定。所以不需要、也不该再给 .dropdown-menu 加 .dropdown-menu-start。
- 若想让菜单左边缘对齐按钮左边缘（即“按钮和菜单左边线对齐”），应改用
.dropdown-menu-end+.dropstart组合 -
.dropstart容器内，.dropdown-menu仍需是直接子元素，中间插<div> 会导致定位失效 <li>导航栏中使用 <code>.dropstart时，确保父级是.navbar-nav > .nav-item结构，否则 flex 布局可能挤压菜单宽度 - 检查触发按钮是否带
data-bs-toggle="dropdown"—— 注意是bs，不是旧版的data-toggle - 确认
.dropdown-menu是.dropup或.dropstart元素的**直接子元素**，不能隔一层<div> <li>如果用 JS 动态插入下拉结构，需手动调用 <code>bootstrap.Dropdown.getOrCreateInstance(el)初始化 - 浏览器控制台搜
Uncaught Error: Popper: "reference" is not a valid selector，大概率是触发元素没正确绑定或已被移除
为什么 .dropup 或 .dropstart 加了没反应
90% 的情况不是类名写错，而是 DOM 结构或初始化缺失。Bootstrap 5 依赖 Popper 和 data 属性协同工作，缺一不可。
方向类之间不叠加，但可组合修饰类
.dropup、.dropstart、.dropend 三者互斥，一个容器只能用其中一个。但它们可以和对齐类（如 .dropdown-menu-end）、尺寸类（如 .dropdown-menu-lg）、响应式类（如 .dropdown-menu-sm-start）自由组合。
例如：<div class="dropstart"><div class="dropdown-menu dropdown-menu-end dropdown-menu-lg"> 是合法且常见的写法，表示“向左弹出 + 菜单右对齐 + 大屏尺寸”。但 <code>class="dropup dropstart" 这种写法会被 Popper 忽略后者，只生效 .dropup。
真正容易被忽略的是：这些方向类改变的不只是视觉位置，还影响 Popper 的锚点计算逻辑和滚动边界检测。所以在模态框、固定定位容器或 transform 父元素里用 .dropstart，可能需要额外加 data-bs-boundary="viewport" 来强制重置参考边界。
