如何在IONIC 3中的离子项部分内显示两个离子场

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

请尝试在离子项之前添加离子行。我希望这可以帮到你。感谢

<activity>

Answer 2

您只需使用<ion-grid>，如下所示。

这有效stackblitz

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

Answer 3

就个人而言，我不建议在列表中的每个项目中创建一个网格...可能真的很难处理。

但是看看你的代码，我看到你只想把这一行分成两行，所以每个输入都会相互靠近..

所以这对我来说很简单（https://ionic-list-items-with-two-inputs-in-row.stackblitz.io/）

<ion-content padding>
  <ion-list>
    <ion-label stacked> Phone Number</ion-label>
    <ion-item>      
      <ion-input type="tel" placeholder="Area code"></ion-input>
      <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>