[英]Set ion-card at same size in a a ion-grid
嗨,我正在構建一個目錄應用程序,我正在展示一些項目,但它們以不同的尺寸顯示,我無法讓離子卡以相同的尺寸顯示
<ion-content [fullscreen]="true">
<ion-grid >
<ion-row *ngFor = 'let item of items'>
<ion-card>
<ion-img [src]='item.imagePath'></ion-img>
<ion-header>
<ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
<ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
</ion-header>
<!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
</ion-card>
</ion-row>
</ion-grid>
</ion-content>
它的外觀如何在此處輸入圖像描述
您需要將每一行包裝在一列中。
<ion-grid>
<ion-col size="12">
<ion-row *ngFor = let item of items'>
<ion-card>
<ion-img [src]='item.imagePath'></ion-img>
<ion-header>
<ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
<ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
</ion-header>
<!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
</ion-card>
</ion-row>
</ion-col>
</ion-grid>
在你 CSS 中這樣做....
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.