智能手机离子工具栏中的全宽离子段答案

【问题标题】：Full width ion-segment in a ion-toolbar for smartphone智能手机离子工具栏中的全宽离子段
【发布时间】：2019-10-05 16:54:31
【问题描述】：

这是我的标题部分：

<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%。我怎样才能做到这一点？第二步，这个场景我只想要设备而不是电脑，因为屏幕更大！

【问题讨论】：

您可以将 ion-row 和 ion-col 用于段的相同宽度
你能用我的示例代码提供你的想法吗？
我添加了答案请检查

标签： angular ionic-framework ionic4

【解决方案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>

【讨论】：

您的解决方案不起作用，因为 col 比我的解决方案小。如何解决？
你可以给 col 宽度，例如col-3