Maison >interface Web >tutoriel CSS >Comment ajouter un espacement réactif entre les colonnes Bootstrap ?

Comment ajouter un espacement réactif entre les colonnes Bootstrap ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-06 15:31:12240parcourir

How to Add Responsive Spacing Between Bootstrap Columns?

Comment créer un espacement entre les colonnes Bootstrap

Pour insérer un espace entre les colonnes dans Bootstrap, suivez ces étapes :

Question :

Comment ajouter un espace entre deux colonnes qui ajusterait automatiquement la largeurs des colonnes pour compenser l'espacement ?

Réponse :

Enroulez les colonnes dans une ligne et, dans chaque colonne, imbriquez une autre colonne de la même largeur que la colonne parent :

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">Your Content</div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">More Content</div>
  </div>
</div>

Explication :

Cette technique crée une « gouttière » entre les colonnes imbriquées, qui héritent de toute la largeur de leurs colonnes parentes. Les gouttières intégrées de Bootstrap espaceront automatiquement les éléments de manière égale.

Exemple :

[Image de colonnes espacées avec des gouttières créées à l'aide de l'approche des colonnes imbriquées]

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn