css - Angular Material 导航栏不是响应式的

Question

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

我有一个使用 mat-toolbar 的 nav bar。它适用于任何平板电脑或更大尺寸的屏幕，但当 nav bar 不适合屏幕时，不适合的部分不会显示。我试过使用 bootstrap 来解决这个问题，但没有任何运气。这是 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;
}

我尝试了 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>