离子段按钮问题

【问题标题】：Ionic segment button issue离子段按钮问题
【发布时间】：2020-05-31 15:03:16
【问题描述】：

我创建了三个离子段按钮。如何修复适合屏幕的按钮？如下图所示，分段按钮自动放置在中心。我无法使按钮伸展。

<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>

【问题讨论】：

标签： ionic-framework

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

【讨论】：