相关疑难解决方法(0)

我正在尝试使用角度材料2创建一个导航栏,它在移动设备和平板电脑等小屏幕中折叠.我只能找到md-button而不是md-menu-bar,就像在角度材料中一样

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

我有一个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 创建响应式工具栏的解决方案，但这并没有解决我的问题。那篇文章是关于响应式导航栏的，而使导航栏响应式可能涉及解决我的问题，这不是我要解决的问题。相反，我只是试图解决中断问题，解决方案不需要涉及响应式设计，尽管这会受到欢迎。