Проблема с кнопкой сегмента Ioni c

Question

Я создал три кнопки ионных сегментов. Как сделать так, чтобы кнопки подходили к экрану? Как вы можете видеть на изображении ниже, кнопки сегментов автоматически помещаются в центр. Не могу заставить кнопки растягиваться.

<ion-segment>
    <div>
        <ion-segment-button value="p1" >
        <ion-label><b>Person 1</b></ion-label>
        </ion-segment-button>
    </div>
    <div>
        <ion-segment-button value="p2">
        <ion-label><b>Person 2</b></ion-label>
        </ion-segment-button>
    </div>
    <div>
        <ion-segment-button value="p3">
        <ion-label><b>Person 3</b></ion-label>
        </ion-segment-button>
    </div>
  </ion-segment>

Answer 1

Вы можете использовать ion-row и ion-col вот так:

<ion-row>
  <ion-segment>
      <ion-col>
           <ion-segment-button value="p1" >
           <ion-label><b>Person 1</b></ion-label>
           </ion-segment-button>
      </ion-col>
      <ion-col>
           <ion-segment-button value="p2">
           <ion-label><b>Person 2</b></ion-label>
           </ion-segment-button>
      </ion-col>
      <ion-col>
          <ion-segment-button value="p3">
          <ion-label><b>Person 3</b></ion-label>
          </ion-segment-button>
      </ion-col>
  </ion-segment>
</ion-row>