我想在我的离子列表中连续显示4个离子项.
由于我正在使用Bootstrap,我试图这样做：
<button class="col-sm-3" ion-item *ngFor="let player of players">
<ion-avatar item-left>
<img [src]="user.photoURL">
</ion-avatar>
{{ user.name }}
</button>
但它不起作用.
您可以使用显式列百分比属性手动设置每列的宽度,如下所示：
<ion-row>
<ion-col width-25>
<!-- item 1 -->
</ion-col>
<ion-col width-25>
<!-- item 2 -->
</ion-col>
<ion-col width-25>
<!-- item 3 -->
</ion-col>
<ion-col width-25>
<!-- item 4 -->
</ion-col>
</ion-row>
或者只是动态添加ion-col,它们将展开以填充它们的行,并将调整大小以适应其他列,如下所示：
<ion-row>
<ion-col *ngFor="let player of players">
<ion-item>
<ion-avatar item-left>
<img [src]="user.photoURL">
</ion-avatar>
{{ user.name }}
</ion-item>
</ion-col>
</ion-row>
UPDATE
截至Ionic 3.0.0,与新网格实现相同的方式将是这样的：
<ion-row>
<ion-col col-3>
<!-- item 1 -->
</ion-col>
<ion-col col-3>
<!-- item 2 -->
</ion-col>
<ion-col col-3>
<!-- item 3 -->
</ion-col>
<ion-col col-3>
<!-- item 4 -->
</ion-col>
</ion-row>
因此,width-25属性需要替换为col-3.
