Bootstrap下拉菜单需bootstrap.bundle.min.js（含Popper）和严格HTML结构，否则点击无反应；外层容器加dropdown类，按钮加data-bs-toggle="dropdown"和aria-expanded，菜单用dropdown-menu类且紧邻按钮。
Bootstrap 的下拉菜单（dropdown）本身不自动触发，必须依赖 bootstrap.js（含 Popper）和正确 HTML 结构，否则点击没反应、菜单不出现——这是 90% 初学者卡住的第一步。
确保 JS 和依赖已加载
下拉菜单不是纯 CSS 功能，dropdown 组件依赖 JavaScript 初始化和 Popper 做定位。如果只引入了 Bootstrap CSS，data-bs-toggle="dropdown" 完全无效。
- 确认页面底部或
中加载了bootstrap.bundle.min.js（含 Popper），而不是仅bootstrap.min.js - 检查浏览器控制台是否报错：
ReferenceError: bootstrap is not defined或TypeError: Cannot read properties of null—— 多半是 JS 未加载或加载顺序错 - 用 CDN 时优先选 bundle 版本：
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js
HTML 结构必须严格符合官方要求
Bootstrap 5 对 dropdown 的父容器、触发元素、菜单容器有明确层级和 class 要求，漏掉任一环节都会导致行为异常（比如菜单闪退、定位偏移、无法关闭）。
- 外层容器必须有
class="dropdown"（不能是dropup或其他） - 触发按钮必须有
data-bs-toggle="dropdown"、aria-expanded属性，并且在dropdown容器内 - 菜单容器必须是
<ul class="dropdown-menu"></ul>，且紧跟触发按钮（推荐 DOM 紧邻，避免被其他元素打断） - 菜单项用
<li><a class="dropdown-item" href="#">...</a></li>，不要直接用<div> 包文字 <pre class="brush:php;toolbar:false;"><div class="dropdown"> <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false"> 下拉菜单 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">选项 1</a></li> <li><a class="dropdown-item" href="#">选项 2</a></li> </ul> </div></pre> <h3>常见失效原因与快速排查</h3> <p>菜单点开后立刻消失、点击空白处不关闭、键盘 <code>Esc无响应——这些问题几乎都源于结构或 JS 加载问题，而非样式。-
dropdown-menu没显示？先右键检查元素，看是否被display: none或opacity: 0控制；再确认 JS 是否报错 - 菜单出现在页面顶部/左侧？说明 Popper 未生效，大概率是用了
bootstrap.min.js而非bootstrap.bundle.min.js - 点击菜单项后自动关闭但页面没跳转？检查
<a></a>的href是否为"#"（会触发页面跳到顶部），应设为href="javascript:void(0)"或绑定 JS 事件 - 多个下拉菜单共存时互相干扰？确保每个
dropdown是独立的<div class="dropdown"> 容器，不要嵌套或共享 class <h3>自定义样式时别破坏关键属性</h3> <p>想改背景、圆角、阴影？可以，但别删或覆盖 <code>.dropdown-menu的position: absolute、inset: 0（v5.3+）、transform或data-bs-popper相关属性，否则 Popper 定位失效。- 推荐用
dropdown-menu-dark或自定义 CSS 类追加样式，而不是重写.dropdown-menu - 修改箭头需覆盖
.dropdown-menu::before/::after，但注意它们依赖position: absolute和top/bottom偏移 - 移动端点击区域小？给触发按钮加
py-2 px-3等 padding，别只调字体大小
最常被忽略的是：下拉菜单的交互逻辑完全由 JS 驱动，HTML 结构只是“契约”，JS 不运行，它就只是静态列表。调试时先打开控制台，盯着 Network 和 Console 两栏，比反复改 CSS 有效得多。
- 推荐用
-
