[英]Navbar doesnt work in an bootstrap: 4.0.0-beta.2
I have installed latest version of Bootstrap
: 我已经安装了最新版本的
Bootstrap
:
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"popper.js": "^1.12.9",
And I implemented a navbar
: 我实现了一个
navbar
:
<nav class="navbar navbar-expand-md navbar-light bg-light" *ngIf="!isLogged">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" routerLinkActive="active current">
<a class="nav-link" routerLink="/sign-up"><span class="">Sign Up</span></a>
</li>
<li class="nav-item active" routerLinkActive="active current">
<a class="nav-link" routerLink="/login"><span class="">Login</span></a>
</li>
</ul>
</div>
</nav>
Which should transform into button
when come to mobile size. 谈到手机尺寸时,应将其转换为
button
。 Actually it does but that button
doesn't react for any clicks. 确实可以,但是该
button
不会对任何点击做出反应。 Why? 为什么? Does anyone have any clue?
有人有任何线索吗? I did not add any scripts to
angular.cli
. 我没有向
angular.cli
添加任何脚本。
UPDATE: project structure 更新: 项目结构
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"popper.js": "^1.12.9",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
Here's what you should have in your .angular-cli.json 这是您在.angular-cli.json中应该包含的内容
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.