如何在 IONIC 3 中的 ion-item 部分显示两个 ion-col 字段

Question

我需要在row内显示两个输入字段，如下所示：

但是当我使用时：

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

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>

Answer 4

在

<ion-grid>

之前添加

<ion-row>

，如下所示，它在离子项内对我有用。

<ion-item>
    <ion-grid>
        <ion-row>
            <ion-col>Lorem ipsum 1</ion-col>
            <ion-col size="shrink">lorem ipsum 2</ion-col>
        </ion-row>
    </ion-grid>
</ion-item>