Ionic GridSystem

Question

如果屏幕在中等或以上，我希望X Y在同一個「行」中，如果屏幕在中等以下，我希望X在單獨行上。我第一次嘗試：

<ion-content padding> 
 
    <div col-sm-12 col-md-6>x</div> 
 
    <div col-sm-12 col-md-6>y</div> 
 
</ion-content>

但無論屏幕有多寬x和y始終得到了印在seperat行。 然後我試圖

<ion-content padding> 
 
    <ion-col col-sm-12 col-md-6>x</ion-col> 
 
    <ion-col col-sm-12 col-md-6>y</ion-col> 
 
</ion-content>

現在x和y在同一行中打印不管。

我在做什麼錯了？

進出口使用離子2和我有一個<ion-row>元素bootstrap: [IonicApp]裏面我app.module.ts

Answer 1

包裝你<ion-col>的。該「Rows are horizontal groups of columns that line the columns up properly.」

<ion-content padding> 
    <ion-row> 
    <ion-col col-sm-12 col-md-6>x</ion-col> 
    <ion-col col-sm-12 col-md-6>y</ion-col> 
    </ion-row> 
</ion-content>