离子网格系统

Question

我想让X Y在同一个＆＃34;行＆＃34;如果屏幕是中等或以上，如果屏幕低于中等，则屏幕上的x y。我第一次尝试：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但无论屏幕的宽度是多少x，y总是以单行显示。 然后我试了

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在无论如何，x和y都会打印在同一行。

我做错了什么？

我正在使用Ionic 2，bootstrap: [IonicApp]

中有app.module.ts

Answer 1

将<ion-col>包裹在<ion-row>元素中。 “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>