Ionic2网格列

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

离子使用网格系统，类似于引导，其具有12列。 所以，如果你想让你的列占据50％的宽度，他们必须每列占用6列（因为100％是12列）。

只需将width-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> 

这应该修复它