Question

＆＃13;

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

＆＃13;

这是我的代码。我希望当我向ion-col标签添加宽度值时，我会得到一定的宽度。在这种情况下，我想要四个相等的列。

这就是我得到的：

有人可以告诉我我做错了什么吗？柱宽对我来说非常适用于离子含量，但不适用于离子物质。

Answer 1

自上次更新Ionic 3以来，他们改变了我们使用网格的方式。 width-x不再有<ion-col>个属性。他们改为12 cols网格方案（很像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 grid Docs。

希望这会有所帮助：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。

我似乎无法在离子项[ionic2]

2 个答案: