css 当我们动态创建卡片时，如何将垫卡垫卡动作放置在卡片底部

wz1wpwve 于 2023-03-09 发布在其他

关注(0)|答案(3)|浏览(142)

<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>

css

来源：https://stackoverflow.com/questions/50081370/how-to-place-mat-card-mat-card-action-at-bottom-of-card-when-we-are-creating-car

3条答案

按热度按时间

2cmtqfgy1#

在样式表中添加：

.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

赞(0）回复(0）举报 2023-03-09

iq3niunx2#

解决方案（如果您正在使用

<mat-card>
  <mat-card-header>
    <mat-card-title>title</mat-card-title>
    <mat-card-subtitle>subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
  
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Ok</button>
  </mat-card-actions>
</mat-card>

添加一个类到mat-card .card-internals {最小高度：200 px;对齐内容：间隔显示：Flex;弯曲方向：列; }

我你更喜欢这样的间隔

header
content

action

集

display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap;

在垫卡上和margin: auto 0 0;在垫卡上动作

赞(0）回复(0）举报 2023-03-09

bxjv4tth3#

如果您使用bootstrap，您也可以这样做：

<mat-card class="h-100">
    ...
    </mat-card-content>
    <div class="flex-fill"></div>
    <mat-card-actions>
    ...
</mat-card>

其中，弹性填充使用以下css：

.flex-fill {
    flex: 1 1 auto !important;
}

和H-100：

.h-100 {
    height: 100% !important;
}

赞(0）回复(0）举报 2023-03-09

我来回答

css 当我们动态创建卡片时，如何将垫卡垫卡动作放置在卡片底部

3条答案

相关问题

热门标签

最新问答