Cara menyesuaikan penggayaan CSS asli untuk jarak lajur melebihi g-5 dalam baris Bootstrap

Question

Halaman pendaratan ringkas sedang dibina menggunakan bootstrap. Saya perlu menambah jarak lajur dalam baris. Saya tahu kita boleh meningkatkan jarak dengan campuran jarak sass tersuai, tetapi memandangkan tapak web yang saya bina mengandungi beberapa bahagian, saya mahu memastikannya ringkas dan tidak memerlukan proses binaan. Saya menggunakan nama kelas g-5 pada baris, yang menyediakan jarak 32px atau 40px antara lajur. Bagaimana untuk meningkatkan lagi menggunakan 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">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>

Answer 1

Untuk meningkatkan jarak lajur dalam satu baris menggunakan CSS, anda boleh menggunakan sifat grid-column-gap. Sifat ini menentukan jarak antara lajur dalam reka letak grid.

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