Comment puis-je ajouter un espacement entre les colonnes dans Bootstrap ?

Ajout d'un espacement entre les colonnes dans Bootstrap

Lorsque vous travaillez avec le système de grille de Bootstrap, vous pouvez rencontrer le besoin d'ajouter de l'espace entre les colonnes. Par défaut, les colonnes sont placées les unes à côté des autres. Cependant, vous pouvez facilement obtenir un espacement entre les colonnes à l'aide d'une simple solution Bootstrap.

Colonnes imbriquées

Pour créer un espacement entre les colonnes, vous pouvez envelopper chaque colonne dans une colonne imbriquée. . Par exemple, considérons le code suivant :

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Column 1 content
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Column 2 content
    </div>
  </div>
</div>

Redimensionnement des colonnes internes

En enveloppant les colonnes de cette manière, Bootstrap attribue automatiquement environ 10 px de remplissage au à gauche et à droite des colonnes intérieures. Il en résulte un espace visible entre les colonnes extérieures.

Personnalisation de l'espace

Pour ajuster la quantité d'espace entre les colonnes, vous pouvez spécifier la largeur de l'espace intérieur. colonnes. Par exemple, si vous souhaitez un espace de 100 px, vous modifierez les colonnes intérieures en :

<div class="col-md-12">

Conclusion

En utilisant la technique des colonnes imbriquées, il est simple d'ajouter espacement entre les colonnes dans Bootstrap. Cela peut être particulièrement utile lorsque vous souhaitez mettre en valeur des éléments spécifiques ou créer une mise en page plus attrayante visuellement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!