【发布时间】：2021-07-19 22:40:44
【问题描述】：
有人知道为什么 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"
},
【问题讨论】：
-
你能分享你的
package.json和angular.json文件吗？ -
@robert 你需要 angular.json 和 package.json 的哪一部分，因为我不能在我的帖子中添加这么多代码。它给出了一个错误。
-
来自
package.json与您的dependencies的部分，以及来自angular.json的您设置styles和scripts的部分 -
@robert 我添加了您询问的信息。提前感谢您查看此内容。
-
在您的 html 中将
data-toggle更改为data-bs-toggle即可。
标签： html css angular bootstrap-5