Bootstrap 崩溃在 Angular 9 中不起作用
Bootstrap collapse not working in Angular 9
当我更改屏幕大小时,导航栏无法打开菜单,我遇到了问题。
以下是我的依赖版本运行:
"@angular/animations": "~9.0.6",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/forms": "~9.0.6",
"@angular/platform-browser": "~9.0.6",
"@angular/platform-browser-dynamic": "~9.0.6",
"@angular/router": "~9.0.6",
"bootstrap": "^5.1.1",
"jquery": "3.4.1",
"popper.js": "^1.16.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
我已经尝试按照另一个 post 中的建议降级我的 jquery,但没有任何效果。
这是我的 HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-navbar fixed-top">
<div class="container-fluid">
<!--<a class="navbar-brand" href="#">Navbar</a> -->
<img
width="200"
alt="logo"
src= "assets/imgs/logo.png"
/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/userprofile" routerLinkActive="active">Home
<!--<span class="visually-hidden">(current)</span>-->
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/generalmachining" routerLinkActive="active" >General Machining</a>
<span class="visually-hidden">(current)</span>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/toolreorder" routerLinkActive="active">Tool Re-Ordering</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/setupsheets" routerLinkActive="active">Setup Sheets</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="" >Log Out</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
在 HTML 我调用的 ID 中,我在数据目标中有“#”,它与开发中的 ID 匹配。
这是我的样式和脚本路径:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/custom.js"
]
我觉得此时我正在处理一个丢失的包或一个错误版本的包,但我就是不能把我的手指放在上面。
感谢您的帮助。
尝试在您的 angular 9
应用中安装 bootstrap
,如下所示。这仅适用于 css
导入。
npm install bootstrap --save
现在您需要像这样直接在 style.css
文件中导入 bootstrap css
:
@import "~bootstrap/dist/css/bootstrap.css";
但是,如果您需要使用 jquery
和 popper js
安装 bootstrap
,则 运行 如下命令:
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
成功后 运行 上述命令将其导入 angular.json
文件中,如下所示:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
尝试阅读 Bootstrap v5 docs。数据属性名称已更改,现在命名空间带有 bs-
前缀。进行以下更改,它应该会起作用:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
当我更改屏幕大小时,导航栏无法打开菜单,我遇到了问题。
以下是我的依赖版本运行:
"@angular/animations": "~9.0.6",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/forms": "~9.0.6",
"@angular/platform-browser": "~9.0.6",
"@angular/platform-browser-dynamic": "~9.0.6",
"@angular/router": "~9.0.6",
"bootstrap": "^5.1.1",
"jquery": "3.4.1",
"popper.js": "^1.16.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
我已经尝试按照另一个 post 中的建议降级我的 jquery,但没有任何效果。
这是我的 HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-navbar fixed-top">
<div class="container-fluid">
<!--<a class="navbar-brand" href="#">Navbar</a> -->
<img
width="200"
alt="logo"
src= "assets/imgs/logo.png"
/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/userprofile" routerLinkActive="active">Home
<!--<span class="visually-hidden">(current)</span>-->
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/generalmachining" routerLinkActive="active" >General Machining</a>
<span class="visually-hidden">(current)</span>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/toolreorder" routerLinkActive="active">Tool Re-Ordering</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/setupsheets" routerLinkActive="active">Setup Sheets</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="" >Log Out</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
在 HTML 我调用的 ID 中,我在数据目标中有“#”,它与开发中的 ID 匹配。
这是我的样式和脚本路径:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/custom.js"
]
我觉得此时我正在处理一个丢失的包或一个错误版本的包,但我就是不能把我的手指放在上面。
感谢您的帮助。
尝试在您的 angular 9
应用中安装 bootstrap
,如下所示。这仅适用于 css
导入。
npm install bootstrap --save
现在您需要像这样直接在 style.css
文件中导入 bootstrap css
:
@import "~bootstrap/dist/css/bootstrap.css";
但是,如果您需要使用 jquery
和 popper js
安装 bootstrap
,则 运行 如下命令:
npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
成功后 运行 上述命令将其导入 angular.json
文件中,如下所示:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
尝试阅读 Bootstrap v5 docs。数据属性名称已更改,现在命名空间带有 bs-
前缀。进行以下更改,它应该会起作用:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>