如何在離子2

Question

一個負責任的離子網我的，我需要根據https://stackoverflow.com/a/36432126/2279488在小型設備1列和2列在媒體裝置3列大型設備

向他們展示卡的列表和https://stackoverflow.com/a/36432126/2279488我嘗試了下面的代碼，但最終沒有成功。

1.

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

在小型設備它顯示正確，大中型它示出了2張卡僅

2.

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

在小型設備它正確地示出，上大中型1列顯示，所有卡在列中

3.

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

在小型設備它顯示正確，在中型和大型它僅示出了1列，並卡在該列中所示

Answer 1

我找到了解決方案，在具有相同的問題的情況下其他人

我添加了換行到我的第一個代碼，它的工作原理。

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

Answer 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; 
    }