[英]Ionic 3 ion-grid on ion-card align
如何對齊和修剪網格? 列不正確,不在彼此之間,然后選擇部門。
<ion-card>
<ion-card-header>
<p style="margin-left: 5%"> last orders buy </p>
</ion-card-header>
<ion-card-content padding-right >
<ion-grid style="width: ; ">
<ion-row>
<ion-col col-1 style="font-size: 10px">
ID
</ion-col>
<ion-col col-3 style="font-size: 10px">
Operação
</ion-col>
<ion-col col-1 style="font-size: 9px; margin-top: 1px">
De
</ion-col>
<ion-col col-1 style="font-size: 10px ">
P/
</ion-col>
<ion-col col-2 style="font-size: 10px">
Volume
</ion-col>
<ion-col col-2 style="font-size: 10px">
Valor
</ion-col>
<ion-col col-2 style="font-size: 10px">
Status
</ion-col>
</ion-row>
<ion-row style="margin-left: -20px" *ngFor="let dado of dados" >
<ion-list>
<ion-item-sliding #item>
<ion-item>
<ion-col col-1 style="font-size:10px">
#{{dado.id}}
</ion-col>
<ion-col col-3 style="font-size:10px">
{{dado.operation}}
</ion-col>
<ion-col col-1 style="font-size:10px">
{{dado.from_currency}}
</ion-col>
<ion-col col-1 style="font-size:10px">
{{dado.to_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_in_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_brl}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.operation}}
</ion-col>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="share(item)">Cancelar</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
如果您刪除此滑動,它看起來非常好
.html中的更改
<ion-content no-padding>
<ion-card no-padding>
<ion-card-header>
<p style="margin-left:-9px;"> last orders buy </p>
</ion-card-header>
<ion-card-content no-padding>
<ion-grid>
<ion-row>
<ion-col col col-1 style="font-size: 10px">
ID
</ion-col>
<ion-col col col-2 style="font-size: 10px">
Operação
</ion-col>
<ion-col style="font-size: 9px;">
De
</ion-col>
<ion-col style="font-size: 10px ">
P/
</ion-col>
<ion-col col col-2 style="font-size: 10px">
Volume
</ion-col>
<ion-col col col-2 style="font-size: 10px">
Valor
</ion-col>
<ion-col style="font-size: 10px">
Status
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row *ngFor="let dado of dados">
<ion-col col col-1 style="font-size:10px;">
#{{dado.id}}
</ion-col>
<ion-col col col-2 style="font-size:10px">
{{dado.operation}}
</ion-col>
<ion-col style="font-size:10px">
{{dado.from_currency}}
</ion-col>
<ion-col style="font-size:10px">
{{dado.to_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_in_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_brl}}
</ion-col>
<ion-col style="font-size:10px">
{{dado.operation}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-content>
結果
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.