用于智能手机的离子工具栏中的全宽离子段

Question

这是我的标题部分：

<ion-header color="primary">
  <ion-toolbar color="primary">
    <app-my-header-component></app-my-header-component>
    <ion-segment [(ngModel)]="topTab" (ionChange)="onTabChanged()">
      <ion-segment-button  value="send" >
         <ion-icon color="light"  title="Risultati" name="list-box">Invia</ion-icon>
         <ion-label>Risultati</ion-label>
      </ion-segment-button>
      <ion-segment-button value="calendar" >
         <ion-icon color="light" title="Inviate" name="stats"></ion-icon>
        <ion-label>Classifica</ion-label>
      </ion-segment-button>

      <ion-segment-button value="match" >
        <ion-icon color="light" title="Partite" name="calendar"></ion-icon>
        <ion-label>Partite</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

我希望ion-segment部分中的元素占用更多空间。因此，如果有两个ion-segment buttons，我希望每个元素占据屏幕的50%。在3%的情况下，33%。我如何才能做到这一点？在第二步中，我只想在设备上使用这个场景，而不是pc，因为屏幕更大！

Answer 1

  <ion-header color="primary">
      <ion-toolbar color="primary">
        <app-my-header-component></app-my-header-component>
        <ion-segment [(ngModel)]="topTab" (ionChange)="onTabChanged()">
          <ion-row>
            <ion-col>
              <ion-segment-button  value="send" >
                <ion-icon color="light"  title="Risultati" name="list-box">Invia</ion-icon>
                <ion-label>Risultati</ion-label>
             </ion-segment-button>
            </ion-col>
            <ion-col>
              <ion-segment-button value="calendar" >
                <ion-icon color="light" title="Inviate" name="stats"></ion-icon>
               <ion-label>Classifica</ion-label>
             </ion-segment-button>
            </ion-col>
            <ion-col>
              <ion-segment-button value="match" >
                <ion-icon color="light" title="Partite" name="calendar"></ion-icon>
                <ion-label>Partite</ion-label>
              </ion-segment-button>
            </ion-col>
          </ion-row>
        </ion-segment>
      </ion-toolbar>
    </ion-header>