【发布时间】：2021-06-19 13:00:27
【问题描述】：
我已经为导航栏编写了以下代码，但是当我在小型设备中打开代码时，汉堡图标无法正常工作，但当我尝试单击它时没有任何反应
<nav class="navbar navbar-expand-lg navbar-dark bg-primary ">
<a class="navbar-brand" [routerLink]="['/']">
<img src="../../../assets/img.png" width="30" height="30" class="d-inline-block align-top" alt="">
Trouvaille Social Network
</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 ml-auto">
<!-- if the user is present then printing email -->
<li>
<div *ngIf="email" class="navbar-text float-left">
{{email}}
</div>
</li>
<li>
<a [routerLink]=" ['/'] " class="nav-item nav-link">Home</a>
</li>
<li>
<a *ngIf="!email" [routerLink]=" ['/signin'] " routerLinkActive="active" class="nav-item nav-link">Sign
In</a>
</li>
<li>
<a *ngIf="!email" routerLinkActive="active" [routerLink]=" ['/signup'] " class="nav-item nav-link">Sign
Up</a>
</li>
<li>
<a *ngIf="email" (click)="handleSignOut()" class="nav-item nav-link text-warning">Log Out</a>
</li>
<li>
<a *ngIf="email" routerLinkActive="active" [routerLink]=" ['/addpost']"
class="nav-item nav-link btn btn-warning text-primary">
Post Your Story</a>
</li>
</ul>
</div>
</nav>
这是我在小型设备上的代码 汉堡图标正在出现，但点击它时什么也没有发生
【问题讨论】：
-
请阅读getbootstrap.com/docs/4.6/components/navbar的“工作原理”部分
-
看完后什么都没得到
-
它说“响应行为取决于我们的 Collapse JavaScript 插件”，基本上它不起作用，因为您的 Angular 可能没有 JQuery 和 Bootstrap js。将 JQuery 带入 Angular 是非常糟糕的，Angular 不会了解 jquery 对 Dom 的操作。应该只有一个框架操纵 Dom。因此，您可以在那里手动调整事件窗口大小并使用 hostlistner 并相应地调整 html 部分。或者，如果想简单使用 ngxbootstrap 或类似的东西并遵循他们的文档。
标签： angular bootstrap-4 uinavigationcontroller