Angular Material导航栏不响应

Question

我已经搜索了所有内容，但似乎找不到答案，因此请在此处发布。

我有一个使用nav bar的{​​{1}}。它适用于任何尺寸或以上尺寸的平板电脑，但是当mat-toolbar不能在屏幕上显示时，不显示的部分将不会显示。我尝试使用引导程序来解决此问题，但没有任何运气。这是到仓库repo stackblitz.com/github/jearl4/portfolio的stackblitz链接。导航条形码位于app-> app.component.html文件中

这是我的导航条形码：

nav bar

和我的CSS：

<nav class="navbar navbar-toggleable-xs">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <h1>J.T. Earl</h1>

      <span class="navbar-spacer"></span>

      <button mat-button routerLink="/home">
        <mat-icon>home</mat-icon>
      </button>
      <button mat-button routerLink="/about" routerLinkActive="active">About</button>
      <button mat-button>Services</button>
      <button mat-button>Contact</button>
      <button mat-button routerLink="/capm">Capm</button>

    </mat-toolbar-row>
  </mat-toolbar>
</nav>
<!-- routed view goes here -->
<router-outlet></router-outlet>

我已经尝试过Create a Responsive Toolbar using Angular Material的解决方案，但是并没有解决我的问题。该帖子是关于响应式导航栏的，在使响应式导航栏响应时，可能涉及解决我不是要解决的问题的问题。取而代之的是，我只是试图解决切入点的问题，该解决方案无需涉及响应式设计，尽管这是受欢迎的。

Answer 1

在小屏幕上，我不得不将导航样式从严格的水平布局更改为带有垂直侧面导航的水平样式，但这是我解决问题的方式。

  <nav class="navbar navbar-toggleable-xs">
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>
    <h1>title</h1>

    <span class="navbar-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <button mat-button routerLink="/home">
        <mat-icon>home</mat-icon>
      </button>
      <button mat-button routerLink="/about" routerLinkActive="active">About</button>
      <button mat-button routerLink="/capm">Capm</button>
    </div>
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <button mat-button routerLink="/home">
          <mat-icon>home</mat-icon>
        </button>
        <button mat-button routerLink="/about" routerLinkActive="active">About</button>
        <button mat-button routerLink="/capm">Capm</button>
      </div>
    </mat-sidenav>