Angular 应用程序：bootstrap 导航栏不会在小屏幕上显示

Question

我正在制作一个 angular 应用程序（angular 11.2.4 和 bootstrap 4.5.3）并且 navbar 在小于以下尺寸的屏幕上无法正确呈现~580 像素宽。

我可以沿着栏单击切换器和 'expand' 折叠区域，但仍然没有呈现任何内容。这也是当条形图是固定规则时呈现的内容 navbar

html:

<nav class="navbar navbar-expand-sm bg-dark fixed-top hidden-sm hidden-xs">
  
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link text-white" href="#" routerLink="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#" routerLink="/resume">Resume</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white"  href="#" routerLink="/projects">Projects</a>
        </li>
      </ul>

      <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="https://github.com/">
                <img src="../../assets/github_icon.png" width="30" height="30" class="d-inline-block align-top" alt="">
              </a>
        </li>
      </ul>

    </div>
  </nav>

  <nav class = "navbar visible-xs visible-sm">
    
      <button class="navbar-toggler navbar-toggler-left"
      type="button"
      aria-controls="mobileNavbar"
      aria-expanded="false"
      [attr.aria-expanded]="!isCollapsed" 
      aria-label="Toggle mobile navigation"
      (click)="toggleMenu()"
      >
      <span class="dark-blue-text"><i class="fas fa-bars fa-1x">

      </i></span>
    </button>
    <div class="collapse navbar-collapse" id="mobileNavbar" [ngbCollapse]="isCollapsed">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link text-white" href="#" routerLink="/home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#" routerLink="/resume">Resume</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white"  href="#" routerLink="/projects">Projects</a>
          </li>
        </ul>
      </div>
    </nav>

打字稿：


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

@Component({
  selector: 'app-main-navbar',
  templateUrl: './main-navbar.component.html',
  styleUrls: ['./main-navbar.component.css']
})
export class MainNavbarComponent implements OnInit {

  isCollapsed = true;

  constructor() { }

  ngOnInit(): void {
  }

  toggleMenu() 
  {
    this.isCollapsed = !this.isCollapsed;
  }
}

Answer 1

从您的 nav 标签的 class 中移除 hidden-sm hidden-xs。

编辑：

忽略之前的回答。将 bg-dark 添加到您的第二个导航 class。

<nav class="navbar bg-dark visible-xs visible-sm">

在 Stackblitz 进行演示。

Angular 应用程序：bootstrap 导航栏不会在小屏幕上显示

Angular App: bootstrap navbar doesn't show up on small screen sizes

html

angular-ui-bootstrap

bootstrap-4

angular