html - btn-group 下拉菜单不起作用，但 nav-item 下拉菜单在带有 Bootstrap 的 Angular 中起作用

Question

有人知道为什么 btn-group 下拉菜单不起作用而 nav-item 下拉菜单起作用吗？

<div class="col-md-4">
                                <div class="btn-group dropdown">
                                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      Action
                                    </button>
                                    <div class="dropdown-menu">
                                      <a class="dropdown-item" href="#">Action</a>
                                      <a class="dropdown-item" href="#">Another action</a>
                                      <a class="dropdown-item" href="#">Something else here</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                  </div>
                                  <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                                    <ul class="dropdown-menu" aria-labelledby="dropdown03">
                                      <li><a class="dropdown-item" href="#">Action</a></li>
                                      <li><a class="dropdown-item" href="#">Another action</a></li>
                                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                                    </ul>
                                  </li>
                            </div>

在这里你可以从 angular.json 中找到样式和脚本，你可以从 package.json 中找到依赖项

 "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]


"dependencies": {
    ...
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "boostrap": "^2.0.0",
    "bootstrap": "^5.0.2",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },

Answer 1

所有 Bootstrap 5 data- 属性更改为 data-bs-