Bootstrap 4 使用 Angular 4 折叠导航栏 [英] Bootstrap 4 collapse navbar with Angular 4
问题描述
我想使用 Bootstrap 4 和 Angular 2 制作一个导航栏,当浏览器的宽度达到某个值时,将其内容折叠在按钮上.我实现了这一点,当导航栏折叠时,我可以看到包含导航栏中元素的按钮,但此按钮不起作用.如何在不使用 jquery 的情况下解决此问题?我正在尝试使用 ng-bootstrap.
在图片中,您可以看到导航栏折叠时的按钮.
到目前为止我的代码:
<nav class="navbar navbar-expand-md fixed-top navbar-dark custom-nav"><span class="navbar-brand mb-0 h1">Partes vehículos</span><button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>按钮><div class="collapse navbar-collapse"><div class="navbar-nav ml-auto"><a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">用法:{{ authService.currentUser.name }}</a><a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">Perfil:待办事项</a><button class="nav-item btn btn-outline-warning ml-3 mr-3">Más opciones</button><a class="nav-item nav-link active" routerLink="/" (click)="authService.logout()" *ngIf="authService.isLoggedIn()">萨利尔<span class="sr-only">(当前)</span></a>
</nav>
这个stackblitz 展示了如何使用 ngbCollapse 来自 ng-bootstrap 的指令,不使用 jQuery.布尔标志 isNavbarCollapsed
在组件类中定义,其值由按钮切换.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">...<button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed"><span class="navbar-toggler-icon"></span>按钮><div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse">...
</nav>
I want to make a navbar using Bootstrap 4 and Angular 2 that collapses his content on a button when the width of the browser reaches some value. I achieve this, and when the navbar collapses I can see the button that encloses the elements in the navbar, but this button doesn't work. How can I fix this without using jquery? I was trying to use ng-bootstrap.
In the image you can see the button when the navbar collapses.
My code so far:
<nav class="navbar navbar-expand-md fixed-top navbar-dark custom-nav">
<span class="navbar-brand mb-0 h1">Partes vehículos</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
Usuario: {{ authService.currentUser.name }}
</a>
<a class="nav-item nav-link active" *ngIf="authService.isLoggedIn()">
Perfil: TODO
</a>
<button class="nav-item btn btn-outline-warning ml-3 mr-3">Más opciones</button>
<a class="nav-item nav-link active" routerLink="/" (click)="authService.logout()" *ngIf="authService.isLoggedIn()">
Salir
<span class="sr-only">(current)</span>
</a>
</div>
</div>
</nav>
This stackblitz shows how you can implement the Bootstrap navbar with the ngbCollapse directive from ng-bootstrap, without using jQuery. The boolean flag isNavbarCollapsed
is defined in the component class and its value is toggled by the button.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
...
<button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse">
...
</div>
</nav>
这篇关于Bootstrap 4 使用 Angular 4 折叠导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!