なぜ私のイオン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 width-25>の代わりに<ion-col col-3>を使用します。 col-12は100％に等しいので、col-3は全幅の25％です。

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