Comment personnaliser le style CSS natif pour l'espacement des colonnes au-delà de g-5 dans les lignes Bootstrap

Question

Une page de destination simple est en cours de création à l'aide de bootstrap. Je dois augmenter l'espacement des colonnes dans les lignes. Je sais que nous pouvons augmenter l'espacement avec un mixin d'espacement Sass personnalisé, mais comme le site Web que je construis contient plusieurs sections, je souhaite le garder simple et ne pas nécessiter de processus de construction. J'ai utilisé des noms de classe g-5 sur les lignes, ce qui fournit un espacement de 32 px ou 40 px entre les colonnes. Comment l'augmenter encore en utilisant CSS.

<div class="container mt-5 pt-5">
      <div class="ligne texte-light g-5 fs-1">
        <div class="col-lg-4">
          <div class="bg-dark p-5">colonne</div>
        </div>
        <div class="col-lg-4">
          <div class="bg-dark p-5">colonne</div>
        </div>
        <div class="col-lg-4">
          <div class="bg-dark p-5">colonne</div>
        </div>
      </div>
    </div>

Answer 1

Pour augmenter l'espacement des colonnes dans une ligne à l'aide de CSS, vous pouvez utiliser la propriété grid-column-gap. Cette propriété spécifie l'espacement entre les colonnes dans une disposition en grille.

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