如何設置一列離子網格的樣式？

Question

我在離子行中有三列，其中中間列的大小為 4，而第一列和第三列的大小為 3。問題是中間列的填充和寬度在第一個和最后一個圖標之間增加了間隙。 我希望它們以很小的間隙（大約 10-12 像素）粘在一起。 我將中間列的最大寬度更改為檢查樣式中的適合內容並且它起作用了。 但我無法在 scss 中對其進行樣式設置。

HTML

  <ion-row class="bottom-section ion-align-items-center ion-justify-content-center">
    <ion-col size="3" class="col ion-text-end">
      <ion-button class="delete-btn" color="light" size="large">
        <ion-icon class="delete-icon"  slot="icon-only" size="large" name="trash"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col size="4" class="col col-2 ion-text-center" width-100>
      <ion-button class="record-btn" color="danger" size="large">
        <ion-icon class="record-icon"  slot="icon-only" size="large" name="mic"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col size="3" class="col ion-text-start">
      <ion-button class="add-btn" color="light" size="large">
        <ion-icon class="add-icon"  slot="icon-only" size="large" name="add"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>

社會保障局

.col {
    border: 1px solid;
}

.col-2 {
    --max-width: 100px;
    max-width: 100px;
}

默認樣式

所需樣式

Answer 1

當您需要對少量項目進行更多微調控制時，我認為ion-grid不是一個好的解決方案。 嘗試這樣的事情。

<div class="buttons-wrapper">
    <div class="single-button">
      <ion-button color="light" class="delete-btn">
        <ion-icon slot="icon-only" name="trash"></ion-icon>
      </ion-button>
      <ion-label>Delete</ion-label>
    </div>
    <div class="single-button">
      <ion-button color="danger" class="record-btn">
        <ion-icon slot="icon-only" name="mic"></ion-icon>
      </ion-button>
      <ion-label>Record</ion-label>
    </div>
    <div class="single-button">
      <ion-button color="light" class="add-btn">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
      <ion-label>Add</ion-label>
    </div>
  </div>

.buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    .single-button {
        text-align: center;

        .delete-btn,
        .add-btn {
            margin: 0px 5px;
            height: 50px;
            width: 50px;
            --border-radius: 50%;
            display: block;
        }

        .record-btn {
            margin: 0px 5px;
            height: 70px;
            width: 70px;
            --border-radius: 50%;
            display: block;

            ion-icon {
                font-size: 32px;
            }
        }
        ion-label {
            display: inline-block;
            margin-top: 5px;
        }
    }

}