首页 > 解决方案 > Ionic 4,试图用 col-6 每行显示 2 个,但每行仍然放太多

问题描述

在搜索了几个堆栈溢出和其他帖子之后,我想出了正确的方法来获得两张“卡片”或任何东西(我已经尝试过只使用文本或段落或更简单的东西来卡片)每行显示是用 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>

但这会产生结果:在此处输入图像描述

标签: javascriptangularionic-frameworkionic4

解决方案


我认为原因是 ionic 4 不再使用 col-size 了。相反,您应该尝试 size="6" size-sm。

https://beta.ionicframework.com/docs/layout/grid#stacked-to-horizo​​ntal


推荐阅读