gpt4 book ai didi

css - 动态创建卡片时如何将 Mat-Card Mat-card-action 放在卡片底部

转载 作者:太空宇宙 更新时间:2023-11-03 20:05:45 30 4
gpt4 key购买 nike

<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
<mat-card>
<mat-card-header>
<mat-card-title>{{s.header}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p> {{s.Desc}} </p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button type="submit" color="primary">Submit</button>
</mat-card-actions>
</mat-card>
</div>
<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
<mat-card>
<mat-card-header>
<mat-card-title>{{s.header}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p> {{s.Desc}} </p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button type="submit" color="primary">Submit</button>
</mat-card-actions>
</mat-card>
</div>

最佳答案

添加样式表:

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

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

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

字体:https://github.com/angular/material2/issues/11094

关于css - 动态创建卡片时如何将 Mat-Card Mat-card-action 放在卡片底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50081370/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com