Angular Material 导航栏不具有响应式设计。

Question

我已经搜遍了整个网站，但似乎找不到答案，因此在这里发布。

我有一个使用mat-toolbar的导航栏。 在平板电脑大小或更大的任何屏幕上都很好用，但是当导航栏不适合屏幕时，未适合的部分不会显示。 我尝试使用bootstrap解决问题，但没有成功。 这里是一个指向存储库的stackblitz链接 stackblitz.com/github/jearl4/portfolio。 导航栏代码位于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创建响应式工具栏中的解决方案，但那并没有解决我的问题。那篇文章是关于响应式导航栏的，虽然使导航栏响应式可能涉及到解决我的问题，但这不是我要解决的问题。相反，我只是想解决被截断的问题，解决方案不需要涉及响应式设计，但欢迎这样做。

- John Earl

---

可能是重复的问题：使用Angular Material创建响应式工具栏。 - core114

我已经尝试了那篇帖子中的解决方案，但它们仍然没有解决我的问题。我认为这个问题足够不同，需要发一个新的帖子来讨论。 - John Earl

你好，能否请您提供使用 https://stackblitz.com/ 的代码？ - core114

这是存储库的StackBlitz链接：https://stackblitz.com/github/jearl4/portfolio - John Earl

你找到解决方法了吗？我也遇到了同样的问题。 - Deependra Solanky

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>

- John Earl