咨询Bootstrap 5.1官方dropdown示例开箱无法正常运行的解决方法

问题原因 #

官方的下拉菜单示例汇总页为了让所有下拉菜单样式直接展示在页面上，专门在示例页的全局样式里覆盖了.dropdown-menu的默认属性，把默认的display:none改成了display:block、position:absolute改成了position:static，这个修改仅用于示例展示，不属于Bootstrap 5.1.x的默认发布样式，你本地的.dropdown-menu样式是正确的。

正确使用步骤 #

• 先确认依赖引入完整：Bootstrap 5的下拉菜单需要Popper.js处理定位逻辑，建议直接引入bootstrap.bundle.min.js（已经内置Popper.js，无需单独引入），不能只引入CSS文件。
• 不要复制示例汇总页的整页代码，使用官方组件文档中的标准独立代码片段，标准可用的下拉菜单结构如下：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 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>
    <li><a class="dropdown-item" href="#">菜单项3</a></li>
  </ul>
</div>

• 无需修改.dropdown-menu的默认样式，上述结构引入正确依赖后即可正常弹出使用。

其他注意事项 #

如果是在Vue、React等前端框架中使用，不要直接使用原生Bootstrap的JS逻辑，建议使用对应框架适配的Bootstrap组件库，避免事件绑定异常导致下拉菜单无法弹出。

内容的提问来源于stack exchange，提问作者user16831793