Angular Bootstrap 4 Navbar 不会切换和 navbar-dark 问题

Posted 2023-03-06

【中文标题】Angular Bootstrap 4 Navbar 不会切换和 navbar-dark 问题

【英文标题】：Angular Bootstrap 4 Navbar won't toggle and problems with navbar-dark

【发布时间】：2019-08-22 08:05:37

【问题描述】：

当我的屏幕宽度较小并且尝试单击汉堡包来切换导航时 - 没有任何反应。我已经尝试用已经提出的问题来解决问题，但我无法找到我的错误。 此外，一旦我删除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>

Angular.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"
            ],

Package.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"
  ,

【问题讨论】：

首先将 bootstrap 安装到 Angular，如下所示：***.com/questions/50559810/…

@לבנימלכה 添加导入 'bootstrap/dist/css/bootstrap.min.css';带来不会找到文件。当我在它前面添加 /node_modules 时，WebStorm 能够找到该文档，但 angular 说没有这样的文件。

请看我的回答

【参考方案1】：

你有几个问题：

将引导程序安装到 Angular 6+ as here 将bg-dark 类添加到<nav> 使用此example 演示 Angular 中的引导行为

See here working code

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;

【讨论】：

谢谢！到目前为止，这有效。但是我可以在不使用 bg-dark 的情况下更改汉堡包吗，因为黑色背景不是我想要的。我更想要黑色的汉堡包，带有透明的导航背景。

所以删除navbar-dark bg-dark

我认为汉堡包现在是白底白字，如何更改汉堡包的颜色？

看这里：getbootstrap.com/docs/4.1/components/navbar/#color-schemes

谢谢。你能帮我做动画吗？现在移动导航只是在点击时弹出。我可以让它从顶部淡入淡出吗？