html - Angular Bootstrap 4 Navbar 不会切换和 navbar-dark 问题
问题描述
当我有一个小屏幕宽度并且我试图单击汉堡包来切换导航时 - 没有任何反应。我已经尝试用已经提出的问题来解决问题,但我无法找到我的错误。
此外,一旦我删除navbar-dark
汉堡包消失 - 再次将此类添加到对象中,将导航栏的颜色更改为白色,这是我不希望的。
<nav class="navbar navbar-dark navbar-expand-lg">
<div class="container-fluid px-0">
<div class="row w-100">
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-10">
<div class="collapse justify-content-end navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Me</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
角.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"node_modules/aos/dist/aos.css"
],
"scripts": [
"node_modules/popper.js/dist/popper.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
包.json:
"dependencies": {
"@angular/animations": "^7.2.11",
"@angular/cdk": "^7.3.6",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/fire": "^5.1.1",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.6",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"aos": "^2.3.4",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"firebase": "^5.8.5",
"jquery": "^3.3.1",
"ng-recaptcha": "^4.2.1",
"popper.js": "^1.14.7",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
解决方案
你有几个问题:
HTML
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<div class="container-fluid px-0">
<div class="row w-100">
<div class="col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" (click)="isShown = !isShown" >
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-10">
<div class="collapse justify-content-end navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarTogglerDemo03">
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#" (click)="isShown = false" >Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="isShown = false" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="isShown = false" >Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" (click)="isShown = false" >Book Me</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
TS
isShown:boolean=false;
推荐阅读
- r - 如何做指数回归模型?
- c# - 使用具有相同属性但具有不同类型的属性查询 CosmosDB 集合
- python - 在 CMD 上运行 BASH 脚本时出现 ModuleNotFoundError
- javascript - 基于半径的过滤器标记反应原生
- tsql - 使用 having 子句 tsql 优化数据元素
- docker - fsockopen():无法连接到 127.0.0.1:8021(连接被拒绝)
- python - Dask - compute(scheduler='processes') 在提示时效果不佳
- java - 多模块 maven 项目可以被视为微服务吗?
- firebase - 如何 Firebase AB 测试新用户入职?
- python - Python Dash 回调循环