comment puis-je montrer deux champs d'ions col intérieur section ions pièce IONIC 3

Question

Je dois montrer deux champs d'entrée dans une rangée ressembler à:

Mais quand je l'utilise:

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

Mais il montre pas écran chose comme:

Aidez-moi s'il vous plaît.

Answer 1

Vous avez juste besoin d'utiliser <ion-grid> comme indiqué ci-dessous.

Cela fonctionne 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 2

S'il vous plaît essayer d'ajouter des ions ligne avant l'ion-élément. J'espère que cela peut vous aider. Merci

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