Twitter bootstrap 具有角度2和引导4的响应导航栏

我正试图建立一个网络应用程序与导航栏上的顶部与一些选项。但是，当在移动设备上查看网站时，导航栏会收缩，并显示一个图标，供用户按下以显示选项。与本网站显示的行为完全相同

我使用angular 2和bootstrap 4

我试过bootstrap 4的例子，但它们似乎对angular 2不太管用（下拉菜单不管用）。这时我发现angular团队实际上一直在开发自己的框架，以与名为ng bootstrap的bootstrap集成。然而，这里没有任何关于响应导航条的内容

---

有没有一种快速简便的方法来构建这样的导航栏，而无需通过检查屏幕大小和改变周围的事物来手动进行操作？

您可以将引导和角度功能结合起来来实现这一点。我使用的是角度4，但这个解决方案也应该适用于角度2。我也在使用bootstrap4（beta版），我知道如果你使用alpha版本，这会有点不同

标记：

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand/Logo</a>
  <button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation"
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

我们在这个解决方案中所做的是摆脱引导折叠插件，并使用一个非常简单的版本来完成。我们让引导在较大屏幕上处理菜单的显示/隐藏，而在较小屏幕上隐藏可折叠菜单，直到用户单击切换按钮。我们通过在Angular中使用[hidden]指令并将其绑定到一个名为collapse的布尔变量来实现这一点。我们在单击按钮时切换折叠，并在选择菜单项时将其设置为false

---

这个答案是根据几年前有人就同一主题给出的一个早期答案改编的（很遗憾，我找不到），但这个答案是针对Bootstrap 3.x和AngularJS（1.x）。

我不知道Angular 2是否还能用，但我正在使用

• 角度8
• 引导4.5

我的实现结果如下

…在我的html模板[header.component.html]中

…在我的css中[header.component.css]

---

我希望这有帮助。欢迎并感谢您的反馈。：）

角度和引导的简单而优雅的组合。我想知道为什么导航栏不是导航栏的一部分，你有没有一个在导航栏中使用下拉菜单来实现类似的angular 4/bootstrap 4的例子beta@Abhi很遗憾，我没有这样的例子。你指的是本页的“你也可以使用下拉列表”部分吗？@Engineer\u安德鲁：这对我很有用。你的帖子结束了我的挣扎。谢谢

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
})
export class NavBarComponent {
  collapse: boolean = true;

  constructor() { }
}

<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a routerLink="/" class="navbar-brand">APP_NAME</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="collapsed = !this.collapsed"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      id="navbarSupportedContent"
      [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }"
    >
      <!-- right nav menus -->
      <ul class="navbar-nav ml-auto">
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

import { Component, OnInit} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"],
})
export class HeaderComponent implements OnInit {

  collapsed = true;

  constructor() {}

  ngOnInit() {}
}

nav {
  position: sticky;
  top: -2px;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar {
  margin-bottom: 2px !important;
}