如何使用Bootstrap 5在Angular 12中实现多级下拉菜单

Bootstrap 5 原生仅支持单级下拉，需要额外添加自定义样式实现多级菜单的层级展开逻辑。

前置准备 #

确保你已经有可用的 Angular 12 项目，未创建项目可先执行命令初始化：
ng new multi-dropdown-demo --version 12

步骤1：安装依赖包 #

执行命令安装 Bootstrap 5 及依赖的 Popper.js：
npm install bootstrap@5 @popperjs/core --save

步骤2：配置项目引入 Bootstrap 资源 #

打开项目根目录的 angular.json 文件，在 architect > build > options 节点下添加如下配置，引入Bootstrap的样式和脚本资源：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

步骤3：编写多级菜单模板代码 #

在需要使用下拉菜单的组件HTML文件中，添加如下层级结构代码，可根据需求扩展菜单层级：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    全部菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">一级菜单A</a></li>
    <!-- 带二级子菜单的一级菜单 -->
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">一级菜单B（含子菜单）</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">二级菜单B1</a></li>
        <!-- 带三级子菜单的二级菜单 -->
        <li class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#">二级菜单B2（含子菜单）</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">三级菜单B21</a></li>
            <li><a class="dropdown-item" href="#">三级菜单B22</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a class="dropdown-item" href="#">一级菜单C</a></li>
  </ul>
</div>

步骤4：添加多级菜单适配样式 #

打开全局样式文件 src/styles.css，添加如下自定义样式，实现子菜单悬浮触发和定位逻辑：

.dropdown-submenu {
  position: relative;
}

/* 子菜单默认定位到父菜单右侧 */
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  display: none;
}

/* 悬浮父菜单时展示子菜单 */
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* 移动端适配：避免子菜单右拉超出屏幕，可选配置 */
@media (max-width: 768px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
    margin-left: 1rem;
  }
}

步骤5：功能验证 #

执行命令启动项目：ng serve，访问页面即可测试多级下拉菜单的展开效果。

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