爲什麼我的離子3列顯示在下一行或溢出

Question

我在這裏有一個問題，我的column1溢出到下一個row，甚至我的label顯示不正確。

下圖會告訴你

下面是我的代碼

<ion-row> 
    <ion-col width-25> 
       <!--<ion-label>Availability</ion-label>--><!-- this label is also not coming properly, please help me to display this label !--> 
       <ion-item>Monday</ion-item> 
      <ion-item>Monday</ion-item> 
       <ion-item>Monday</ion-item> 
       <ion-item>Monday</ion-item> 
       <ion-item>Monday</ion-item> 
       <ion-item>Monday</ion-item> 
       <ion-item>Monday</ion-item> 

    </ion-col> 

    <ion-col width-25> 

     <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
      </ion-item> 

     <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
      </ion-item> 

     <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
      </ion-item> 

     <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
     </ion-item> 

     <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
     </ion-item> 

     <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
     </ion-item> 

      <ion-item> 
      <ion-label>AM</ion-label> 
      <ion-checkbox></ion-checkbox> 
     </ion-item> 

    </ion-col> 



     <ion-col width-25> 

     <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 
     <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 
     <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 
     <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 
     <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 
      <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 

      <ion-item> 
       <ion-label>PM</ion-label> 
       <ion-checkbox></ion-checkbox> 
      </ion-item> 

    </ion-col> 

</ion-row> 

問題：請幫我做校準到一個單一的row還評論header

請不要介意任何錯誤，因爲我是新來者ionic 3。

在此先感謝!!!!

Answer 1

切換到新的列寬屬性：使用<ion-col col-3>而不是<ion-col width-25>。 col-12等於100％，所以col-3是整個寬度的25％。

https://ionicframework.com/docs/theming/responsive-grid/#setting-one-column-width