离子 2 网格列

Question

我试图用ionic2在每行中容纳两个项目(两列(，但它不起作用。

<ion-grid>
<ion-row wrap>
<ion-col width-50 *ngFor="let item of items">
<div class="myCell">
<div class="card">
<div class="item item-body">
<img class="full-image" src="...">
<div class="item item-avatar">
<img src="...">
</div>
<div style="font-size:3vw;margin:2vw">    {{item.name}}</div>
</div>
</div>
</div>
</ion-col>
</ion-row>
I use this code but it still not working, someone knows something about this difficult topic?

谢谢

Answer 1

Ionic使用一个网格系统，类似于bootstrap，有12列。 因此，如果您希望您的列占用宽度的 50%，它们必须占用每列 6 列的空间(因为 100% 是 12 列(。

只需将宽度-50 更改为 col-6。

<ion-col col-6 *ngFor="let item of items">

Answer 2

<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let item of items">
<div class="myCell">
<div class="card">
<div class="item item-body">
<img class="full-image" src="...">
<div class="item item-avatar">
<img src="...">
</div>
<div style="font-size:3vw;margin:2vw">    
{{item.name}}
</div>
</div>
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>

这应该可以解决它