Question

我有以下代码（角度6和材质设计）：

<div class="grid-container">

  <h1 class="mat-h1">Candidatos</h1>

  <mat-grid-list cols="5" gutterSize="20px" class="list-candidatos">

    <mat-grid-tile *ngFor="let candidato of candidatos">

      <mat-card class="candidato-card">

        <mat-card-header>
          <mat-card-title>{{candidato.nome}}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
          &nbsp;
        </mat-card-content>

        <mat-card-actions>
          <button mat-button>Edit</button>
        </mat-card-actions>

      </mat-card>

    </mat-grid-tile>

  </mat-grid-list>

</div>

还有CSS

.list-candidatos {
  width: 93%;
  margin: 20px auto;
  margin-top: 60px;
}

.candidato-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

但是，无论我在CSS中进行了什么更改，我都无法使席卡动作或席卡页脚保持在卡的底部。所以：

结构正确或缺少什么？
如果正确，如何将mat-card-actions / mat-card-footer放在mat-grid-tile的底部？

Answer 1

在CSS中尝试一下，它将解决页脚问题

.mat-card{
  display:flex;
  flex-direction: column;
}

.mat-card-header {
  flex-shrink: 0;
}

.mat-card-content{
  flex-grow: 1;
  overflow: auto;
}

Answer 2

尝试将mat-card（带有或不带有页脚，图像或页眉）或使用mat-card和fxFlex值的div或任何元素放入自定义组件中与fxLayout="row wrap像这样：

<div fxLayout="row wrap">
    <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
</div>

这个问题类似于this one

mat-grid-list，带有mat-card和mat-card-actions / mat-card-footer

2 个答案: