离子4,尝试使用col-6每行显示2,但每行仍然显示太多

时间:2018-11-06 04:36:15

标签: javascript angular ionic-framework ionic4

在搜索了几个堆栈溢出和其他帖子之后,我想出了获取两张“卡片”或其他任何东西的正确方法(我尝试过仅用文本或段落或更简单的东西来写卡片),以显示每行重复一个col-6在同一行上,并且应该换行:

  <ion-grid>
      <ion-row>
        <ion-col col-6 *ngFor="let place of places">
          <ion-card>
            <ion-card-content>
              <ion-card-title>
                Card's Title
              </ion-card-title>
              <p>
                Card's description
              </p>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row> 
  </ion-grid>

但这会产生结果:enter image description here

1 个答案:

答案 0 :(得分:1)

我认为原因是因为离子4不再使用col-size。相反,您应该尝试使用size =“ 6” size-sm。

https://beta.ionicframework.com/docs/layout/grid#stacked-to-horizontal