我似乎无法更改我的 ion-item [ionic2] 中列的宽度

Question

 <ion-item-group *ngIf="tuesdayJson"> <ion-item-divider class="" sticky> {{tuesdayJson.dayOfWeek}} </ion-item-divider> <ion-item class="transparency" *ngFor="let event of tuesdayJson.agendaEvents"> <ion-row class="agenda-event-row {{event.rowType}}"> <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-item> </ion-item-group>

This is my code. I expect that when I add a width value to my ion-col tag, I'd get a certain width. In this case I want four equal columns.

This is what I get:

Can someone please tell me what I am doing wrong? The column width thing works for me perfectly fine inside ion-content but not inside ion-item.

Answer 1

Since the last update to Ionic 3 they've changed the way we use the grid. There's no more width-x attribute for <ion-col> . They changed to 12 cols grid scheme (much like the one in Bootstrap).

So in this case your code needs to be like this:

<ion-row class="agenda-event-row {{event.rowType}}">
  <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>

If you need further explanation about the grid, screen sizes and everything else just see the Ionic 3 grid Docs .

Hope this helps :D

Answer 2

I may be late. But considering being helpful for someone else, following way works for me in Ionic 4.

 <ion-grid> <ion-row> <ion-col size='2'> 1 of 3 (wider)(wider)(wider)(wider)(wider)(wider) </ion-col> <ion-col size='8'> 2 of 3 (wider)(wider)(wider)(wider)(wider)(wider) </ion-col> <ion-col size='2'> 3 of 3 (wider)(wider)(wider)(wider)(wider)(wider) </ion-col> </ion-row> </ion-grid>

But total of sizes is 12.