angular - 如何在 IONIC 3 中的 ionic 项目部分显示两个 ionic 列场

Question

我需要在行中显示两个输入字段，如下所示:

但是当我使用时:

<ion-list>
<ion-item>
  <ion-label stacked> Phone Number</ion-label>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-input type="tel" placeholder="Area code"></ion-input>
      </ion-col>
      <ion-col>
        <ion-input type="tel" placeholder="Number"></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

但它没有显示任何类似的屏幕:

请帮帮我。

Answer 1

请尝试在 ion-item 之前添加 ion-row。我希望这可以帮助你。谢谢

<ion-list>

  <ion-label stacked> Phone Number</ion-label>

    <ion-row>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Area code"></ion-input>
    </ion-item>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
    </ion-row>

</ion-list>