Bootstrap 4 Navbar 在 Angular 4 中不会折叠

Question

我正在 Bootstrap 4 和 Ng-Bootstrap 的 Angular 4 项目中工作，

我在 angular-cli.json 中用这种方式链接了问题 bootstrap.css

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"
  ],

并在我的 app.module 中导入 NgbModule，看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我从 bootstrap 网站复制文档并添加了 ng-bootstrap 的切换组件（效果很好），代码如下所示

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" 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">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li>
        <div ngbDropdown class="d-inline-block">
          <div class="nav-link" id="dropdownBasic1" ngbDropdownToggle>Toggle 
dropdown</div>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
            <button class="dropdown-item">Action - 1</button>
            <button class="dropdown-item">Another Action</button>
            <button class="dropdown-item">Something else is here</button>
          </div>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" 
aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit">Search</button>
    </form>
  </div>
</nav>

当我缩小 window 并且切换正常工作时，问题就开始了，当我按下折叠导航栏的按钮时，它不起作用。

我试过安装链接jquery和popper以及bootstrap的js文件，还是不行，实际的angular-cli.json 看起来像这样

     "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/jquery/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"

      ],

我做错了什么？

Answer 1

寻找已编译的classes，可能你拿错版本了。我对 class col-sm-offset-# 也有类似的问题，问题是这个 classes 在那个版本中不存在。可能是同一个问题

这是路线..\node_modules\bootstrap\dist\js 这里我们有两个文件 bootstrap.js 和 bootstrap.min.js

找到 bootstrap.js 导航 classes。如果找不到，请寻找另一个 Bootstrap 存储库。

祝你好运。

Answer 2

要使用 angular，您需要此修复程序

首先在你的 class public navbarCollapsed = true;

中定义它

然后更改您的按钮

<button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

您还需要将此添加到折叠中 div

<div class="collapse navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarSupportedContent">

现在您不需要 jquery、popper 或 bootstrap.js

您可以找到有关此问题的更多信息here。

同时检查 ng-bootstraps 工作演示页面代码 link。

Answer 3

我遇到了同样的问题，我使用了正常的 bootstrap 4 而不是 ng-bootstrap 这样我也不需要 app.module 文件中的任何模块。有用。下面是添加到 angular.json (angular v6) 和 bootstrap 4+:

中的脚本

"scripts": ["../node_modules/jquery/dist/jquery.js",
            "../node_modules/popper.js/dist/umd/popper.js", 
             "../node_modules/bootstrap/dist/js/bootstrap.js"]

对于CSS我更喜欢使用Scss版本所以它是这样的。

"styles": [
              "src/styles.scss",
              "../node_modules/font-awesome/scss/font-awesome.scss"
            ],

然后我将 bootstrap 导入 style.scss 文件

@import "~bootstrap/scss/bootstrap.scss";

干杯！ JK

Answer 4

这对我来说很好用我安装了 npm i --save @ng-bootstrap/ng-bootstrap ng add @angular/localize

app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

imports:[NgbModule]

NgbModule.forRoot() 不工作

angular.json "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "脚本": ["node_modules/jquery/dist/jquery.min.js",
“node_modules/bootstrap/dist/js/bootstrap.js]`

希望这能有所帮助，哪怕只是一点点

Bootstrap 4 Navbar 在 Angular 4 中不会折叠

Bootstrap 4 Navbar doesnt collapse in Angular4

css

navbar

bootstrap-4

angular

popper.js