如何在离子卡上张贴页脚。试过这些例子如下,但没有工作。请帮助
.HTML
<ion-card class="dashboardgraph">
<ion-card-header class="cardheader">
CNC 10
</ion-card-header>
<ion-footer class="cardfooter">
footer here ///
</ion-footer>
</ion-card>
答案 0 :(得分:8)
你需要在离子卡中使用ion-col和ion-row。它可以工作。
<ion-content fullscreen>
<ion-card>
<ion-card-header class="cardheader">
CNC 10
</ion-card-header>
<ion-card-content>
Content of the card
</ion-card-content>
<ion-row class="cardfooter">
<ion-col>
<p>Footer goes here </p>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
答案 1 :(得分:0)
使用并完成另一个答案:https://stackoverflow.com/a/47975359/4280561
此处显示所有代码:
HTML:
<ion-card class="has-card-footer">
<ion-card-header>
CNC 10
</ion-card-header>
<ion-row class="card-footer">
<ion-col>
<p>Footer goes here </p>
</ion-col>
</ion-row>
</ion-card>
和CSS:
.card-footer {
position: absolute;
bottom: 0;
width: 100%;
}
.has-card-footer {
padding-bottom: 15px;
}