从 ion-tab-button 中删除周围的空间

Question

我有以下离子选项卡布局：

  <ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()" >
    <ion-tab-bar slot="bottom">
      <ion-tab-button routerDirection='root' *ngFor="let tab of tabList" [tab]="tab.root" class="actual-tab">
        <ion-grid>
          <ion-row>
            <ion-col size="10">
              <ion-thumbnail id="thumbnail_viewer{{tab.root}}"></ion-thumbnail>
            </ion-col>
            <ion-col size="2" class="ion-align-self-start ion-justify-content-end">
              <ion-icon class="close" name="close" (click)=closeTab(tab.root) title="Close tab" [style.visibility]="tab.root === 'tab1' ? 'hidden' : 'visible'"></ion-icon>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="10">
                <ion-label>{{tab.title}}</ion-label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-tab-button>
      <ion-tab-button (click)="addTab(false)">
        <ion-icon name="add-circle"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

我希望离子选项卡按钮中包含的离子网格占据选项卡按钮的整个宽度，即我希望红色空间延伸到与下面屏幕截图中的空白区域相同的大小：

我已经发现，如果我在网格级别的开发人员工具中将弯曲方向从列更改为行，它就会给出我想要的结果。但我无法弄清楚如何在 css 甚至内联样式中做到这一点。我花了很长时间从离子文档中尝试了很多东西。有人能指出我正确的方向吗？

Answer 1

最终找到了解决办法。我所需要的只是：

ion-tab-button {​
    flex-direction: row;
}

Answer 2

我在另一个论坛上找到了这个解决方案，它对我有用

 ion-tab-button {
    max-width: inherit;
    // you can add this 2 to remove the padding
    --padding-start: 0px;
    --padding-end: 0px;
}

Answer 3

为我工作：

ion-tab-button {
    max-width: 100%;
}