bootstrap下拉菜单需正确引入css、js及popper，结构为.dropdown容器内含带data-bs-toggle="dropdown"的按钮和直接子元素.dropdown-menu，支持偏移、方向变体及表单嵌入，常见问题多因js缺失或结构错误导致。
Bootstrap 的 dropdown 组件是快速构建响应式下拉菜单的常用方式，核心在于正确引入 Bootstrap（含 JS 和 Popper）、结构语义清晰、触发逻辑准确。
确保基础依赖已加载
Dropdown 依赖 Bootstrap CSS、JavaScript 及 Popper.js（用于定位），推荐使用 CDN 方式：
- 在
中引入 Bootstrap CSS（含图标可选） - 在页面底部
结束前引入 Bootstrap JS + Popper（Bootstrap 5+ 已内置 Popper，CDN 提供完整包）
示例（Bootstrap 5.3 CDN）：
<!-- CSS --><br><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><br><br><!-- JS（放在 </body> 前）--><br><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
标准下拉菜单 HTML 结构
必须用 .dropdown 作为容器，按钮加 data-bs-toggle="dropdown"，菜单用 .dropdown-menu，内部项用 .dropdown-item：
<div class="dropdown"> <br><button class="btn btn-primary dropdown-toggle"> type="button"<br> data-bs-toggle="dropdown"<br> aria-expanded="false"><br> 下拉菜单<br></button><br><ul class="dropdown-menu"> <br><li><a class="dropdown-item" href="#">首页</a></li> <br><li><a class="dropdown-item" href="#">关于</a></li> <br><li><hr class="dropdown-divider"></li> <br><li><a class="dropdown-item" href="#">退出</a></li> <br> </ul> <br> </div>
注意：aria-expanded 属性由 JS 自动切换，初始设为 false 即可；.dropdown-divider 用于分隔线。
支持多种触发方式和变体
除默认点击外，还可通过属性或 JS 控制行为：
- 添加
data-bs-offset="10,20"调整菜单偏移（x,y） - 设置
data-bs-display="static"禁用 Popper 定位（菜单固定在父容器内） - 用
.dropup、.dropend、.dropstart改变展开方向 - 配合表单元素：在
.dropdown-menu内放<input>或<select></select>，需手动处理聚焦逻辑
常见问题与修复提示
如果菜单不弹出，优先检查：
- 是否遗漏
bootstrap.bundle.min.js（含 Popper）？仅引入bootstrap.min.js会失效 - 按钮是否缺少
data-bs-toggle="dropdown"或写成旧版data-toggle - 是否误将
.dropdown-menu放在.dropdown外部？它必须是其直接子元素 - 是否有 CSS 冲突（如
overflow: hidden父容器裁剪了菜单）？可加position: static临时测试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
