Angular Material 导航栏不是响应式的答案

【问题标题】：Angular Material nav bar not a responsiveAngular Material 导航栏不是响应式的
【发布时间】：2019-01-21 23:05:13
【问题描述】：

我已经搜遍了，似乎找不到答案，所以在这里发布。

我有一个使用mat-toolbar 的nav bar。它适用于任何尺寸或以上的平板电脑，但当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;
}

我尝试了Create a Responsive Toolbar using Angular Material 的解决方案，但这并没有解决我的问题。那篇文章是关于响应式导航栏的，而使导航栏响应式可能涉及解决我的问题，而这不是我要解决的问题。相反，我只是想解决中断问题，解决方案不需要涉及响应式设计，尽管这会受到欢迎。

【问题讨论】：

Create a Responsive Toolbar using Angular Material的可能重复
我已经尝试了该帖子中的解决方案，但他们仍然没有解决我的问题。我认为这是不同的足以保证自己的帖子。
您好，请问您能否使用stackblitz.com提供您的代码
这里是仓库stackblitz.com/github/jearl4/portfolio的stackblitz链接
您找到解决方案了吗？我也面临同样的问题。

标签： css angular twitter-bootstrap responsive-design angular-material

【解决方案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>

【讨论】：