我該怎麼讓離子離子項目部內部的兩個離子山坳場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

您只需要使用<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 2

請重離子項目之前添加離子行。我希望這可以幫助你。由於

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