如何在 ionic 2 中拥有响应式离子网格答案

【问题标题】：How to have a responsive ionic grid in ionic 2如何在 ionic 2 中拥有响应式离子网格
【发布时间】：2017-03-22 18:38:55
【问题描述】：

我有一张卡片列表，我需要在小型设备的 1 列、中型设备的 2 列和大型设备的 3 列中显示它们

基于https://stackoverflow.com/a/36432126/2279488 和https://stackoverflow.com/a/36432126/2279488 我尝试了下面的代码，但最后没有成功。

 <ion-row  responsive-sm>
    <ion-col *ngFor="let card of cards" width-50>
      <ion-card >

在小型设备上正确显示，在大型和中型设备上仅显示 2 张卡片

  <ion-row  responsive-sm>
    <ion-col  width-50>
      <ion-card *ngFor="let card of cards">

在小型设备上正确显示，在大型和中型设备上显示 1 列并且所有卡片都在列中

  <ion-row  responsive-sm>
    <ion-col>
      <ion-card *ngFor="let card of cards">

在小型设备上正确显示，在中型和大型设备上仅显示 1 列，并且该列中显示卡片

【问题讨论】：

标签： ionic-framework responsive-design ionic2

【解决方案1】：

我找到了解决方案，以防其他人遇到同样的问题

我在我的第一个代码中添加了 wrap 并且它有效。

  <ion-row  responsive-sm wrap>
    <ion-col *ngFor="let card of cards" width-50>
      <ion-card >

【讨论】：

【解决方案2】：

我在 HTML 下面的代码中添加了它，它对我有用。

 <ion-row class="categoryView">
        <ion-col class="gridCol" width-40></ion-col>
        <ion-col class="gridCol" width-40></ion-col>
      </ion-row>

ion-col.gridCol.col {
      height: 80px;
      background: azure;
      margin: 10px;
  }

  ion-row.categoryView.row {
      height: 100px;
      background: black;
  }

【讨论】：