简体   繁体   English

Navbar无法在引导程序中运行:4.0.0-beta.2

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM