angular - mat-toolbar-row 相互堆叠

Question

我有这个问题<mat-toolbar-row>。<mat-toolbar>我尝试在with main-content类上使用 flexbox 和 grid 。但他们一直在堆积一点。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    // SOME CODE
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="main-toolbar" color="primary">
      <mat-icon><img src="../../assets/images/x1/outline_navigate_before_black_24dp.png" alt=""></mat-icon>
      <span>R</span>
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon><img src="../../assets/images/x1/round_menu_black_24dp.png" alt=""></mat-icon>
      </button>
    </mat-toolbar>

    <!-- /////////////////////////// -->
    <!--  Home grid -->
    <!-- /////////////////////////// -->
      <mat-toolbar class="main-content">
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>
        <mat-toolbar-row>
          <mat-card>
            <img src="../../assets/images/x1/round_add_black_24dp.png" alt="" mat-card-avatar>
            <mat-card-title>Lorem Ipsum</mat-card-title>
            <mat-card-subtitle>Lorem Ipsum</mat-card-subtitle>
          </mat-card>
        </mat-toolbar-row>

      </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

这是那些元素的scss

.main-content {
padding-top: 64px;
box-sizing: border-box;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;

mat-card {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 0;
}

如果你仔细看它重叠了一些像素，只有底部<mat-toolbar-row>有完整的高度。 移动视图 桌面视图

问候。

标签： angularangular6angular-material2