如何自訂Bootstrap行中超過g-5的列間距的原生CSS樣式

Question

使用bootstrap正在建立一個簡單的落地頁。我需要增加行中的列間距。我知道我們可以透過自訂sass間距mixin來增加間距，但由於我正在建立的網站包含幾個部分，我希望保持簡單，不需要建置流程。我在行上使用了g-5類名，它在列之間提供了32px或40px的間距。如何使用CSS進一步增加它。

<div class="container mt-5 pt-5">
      <div class="row text-light g-5 fs-1">
        <div class="col-lg-4">
          <div class="bg-dark p-5">列</div>
        </div>
        <div class="col-lg-4">
          <div class="bg-dark p-5">列</div>
        </div>
        <div class="col-lg-4">
          <div class="bg-dark p-5">列</div>
        </div>
      </div>
    </div>

Answer 1

要使用CSS增加行中的列間距，可以使用grid-column-gap屬性。此屬性指定了網格佈局中列之間的間距。

.container {
  mt-5;
  pt-5;
}

.row {
  text-light;
  g-5;
  fs-1;
  grid-column-gap: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container mt-5 pt-5">
  <div class="row text-light g-5 fs-1">
    <div class="col-lg-4">
      <div class="bg-dark p-5">column</div>
    </div>
    <div class="col-lg-4">
      <div class="bg-dark p-5">column</div>
    </div>
    <div class="col-lg-4">
      <div class="bg-dark p-5">column</div>
    </div>
  </div>
</div>