javascript - Ionic 4,试图用 col-6 显示每行 2 个,但每行仍然放置太多

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

最佳答案

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

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

关于javascript - Ionic 4,试图用 col-6 显示每行 2 个,但每行仍然放置太多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53165798/

相关文章:

javascript - 如何在表格的几列上创建文本跨度?

javascript - 将一系列有序操作组合成一个 Observable

angular - 如何在 angular2/ionic 2 typescript 应用程序中使用 Numeral.js 库?

angular - mat-select multiple 从数组中设置选中的选项,Angular4

javascript - 详细信息页面 View 不显示 ionic 数据

angular - ionic 单一语言

javascript - 动态 Google map 多边形 - 单击时如何设置为可编辑

javascript - 如何在单击时为其添加新值

angular - 扩展/覆盖可重用 angular2 组件的样式

angular - ionic /Angular ngFor 和点击功能