我似乎無法更改我的 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>

這是我的代碼。 我希望當我向 ion-col 標簽添加寬度值時，我會得到一定的寬度。 在這種情況下，我想要四個相等的列。

這就是我得到的：

有人可以告訴我我做錯了什么嗎？ 列寬對我來說在 ion-content 內部非常好，但在 ion-item 內部卻沒有。

Answer 1

自上次更新 Ionic 3 以來，他們改變了我們使用網格的方式。 <ion-col>沒有更多的width-x屬性。 他們改為 12 列網格方案（很像 Bootstrap 中的方案）。

所以在這種情況下，你的代碼需要是這樣的：

<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>

如果您需要有關網格、屏幕尺寸和其他所有內容的進一步說明，請參閱Ionic 3 網格文檔。

希望這會有所幫助：D

Answer 2

我可能遲到了。 但是考慮到對其他人有幫助，以下方式在 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>

但總尺寸為 12。