在一行中有2列的方法是什么？

Question

我试图用离子2开发一个混合应用程序，我没有在这个范围内有很多经验，但我试图开发小项目。 我需要将两列（50％）放在一行中，我试试这个，但它对我不起作用：

    <div class = "row">
       <div class = "col col-50">col 1</div>
       <div class = "col col-50">col 2</div>
    </div>

有人能帮助我吗？ 感谢＆＃39; S

Answer 1

这对我来说很完美：

<ion-grid>
  <ion-row >
    <ion-col col-6>
      ...
    </ion-col>
  </ion-row>
</ion-grid>

如果你使用* ngFor将它放在你的ion-col：

<ion-grid>
   <ion-row>
     <ion-col col-6 *ngFor = "let item of items">
       ...
     </ ion-col>
   </ ion-row>
</ ion-grid>

Answer 2

您正在使用div，如果您希望它们位于同一行，您应该使用span

<div class="row">
    <span class="col-50"> </span>
    <span class="col-50"> </span>
</div>

Answer 3

如果您正在使用Ionic 2，请尝试：

<ion-row>
      <ion-col width-50></ion-col>
      <ion-col width-50></ion-col>
</ion-row>

但应在其网站上提及： https://ionicframework.com/docs/v2/components/#grid

Answer 4

如果没有指定，Ionic会自动均匀地分配列宽，至少对于Ionic3是否为

<ion-row>
  <ion-col>stuffhere</ion-col>
  <ion-col>stuffhere</ion-col>
<ion-row>

这是整洁有效的方式。