Angular Material 导航栏不是响应式的

Question

我到处搜索，似乎无法找到答案，所以在这里发帖。

我有一个nav bar使用mat-toolbar. 它适用于任何屏幕平板电脑或更大尺寸，但当nav bar屏幕不适合时，不适合的部分不会显示。我试过使用引导程序来解决这个问题，但没有任何运气。这是一个指向 repo stackblitz.com/github/jearl4/portfolio 的 stackblitz 链接。导航条码在 app->app.component.html 文件中

这是我的导航条码：

<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>

和我的CSS：

.navbar-spacer {
  flex: 1 1 auto;
}

.header {
  min-width: 319px;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}

我已经尝试使用 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>