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

【问题标题】：I can’t seem to change the width of my columns inside my ion-item [ionic2]我似乎无法更改 ion-item [ionic2] 中列的宽度
【发布时间】：2017-10-09 14:41:55
【问题描述】：

<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 内部却不行。

【问题讨论】：

你的离子版本是什么？你的package.json 中的ionic-native 版本是什么？
"@ionic-native/core": "3.1.0", "ionic-angular": "2.3.0",

标签： html css ionic2

【解决方案1】：

自从上次更新 Ionic 3 以来，他们改变了我们使用网格的方式。 <ion-col> 没有更多的 width-x 属性。他们改为 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

【讨论】：

不客气：D，如果你能接受我的回答是正确的，那么它可以帮助其他人。
问题，你知道我怎么会比 col-1 小吗？我的一个图标的侧面仍然有太多空间。
nvm，我解决了。你做 col-2 col-10 然后在 col-10 里面你做 col-1 col-10 col-1 非常整洁，谢谢

【解决方案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。

【讨论】：