Question

我在Angular 6项目中使用了引导程序样式来设计注册页面，它工作正常。但是，当我单击汉堡图标调整浏览器的大小后，它不会折叠，因此不会显示汉堡菜单下的图标。

这是angular.json文件中的样式标签：

"styles":   [
            "src/styles.css"
            ],

这是styles.css文件：

@import "~bootstrap/dist/css/bootstrap.min.css";
@import '~ngx-toastr/toastr.css';

angular.json文件中的脚本数组：

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

导航栏HTML：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">

  <a class="navbar-brand" href="/">My Chat</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="true" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link pointer" (click)="goToSignUp()">Sign-Up</a>

      </li>

    </ul>

  </div>

</nav>

<div class="row p-0 m-0">

  <div class="col-sm"></div>

  <div class="col-sm p-5">

    <h2 class="form-signin-heading">Sign in to continue</h2>

    <label for="inputEmail" class="sr-only">Email address</label>

    <input type="email" id="inputEmail" class="form-control" [(ngModel)]="email" placeholder="Email address" required autofocus>

    <br>

    <label for="inputPassword" class="sr-only">Password</label>

    <input type="password" id="inputPassword" class="form-control" [(ngModel)]="password" placeholder="Password" (keydown.enter)="onKeydown()" required>

    <br>

    <button class="btn btn-lg btn-primary btn-block" type="button"  (click)="signInFunction()">Sign in</button>

  </div>

  <div class="col-sm"></div>

</div>

不确定我缺少什么。

Answer 1

尝试执行此操作->

npm install-保存@ ng-bootstrap / ng-bootstrap

在ng-bootstrap完成安装后
在app.module.ts->中添加->从“ @ ng-bootstrap / ng-bootstrap”导入{NgbModule}；并将其放在@NgModule下，导入：[NgbModule.forRoot（）]
再次运行您的角度应用程序

还请尝试在angular.json中的样式下添加“ node_modules / bootstrap / dist / css / bootstrap.min.css”

在Bootstrap文档网站上的项目的HTML主体之间的Index.Html中添加用于jquery，popper和bootstrap的脚本导入。

Answer 2

在script文件的/body之前添加index.html标记：

-script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"
  
-script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"

Bootstrap汉堡包在Angular 6项目中不起作用

2 个答案: