web-dev-qa-db-fra.com

Bootstrap cartes avec 100% de hauteur et fond de marge

J'essaie de développer une grille de Bootstrap 4 cartes avec les exigences suivantes:

  • Toutes les cartes doivent être placées dans une division class="row", car je ne sais pas combien de cartes il y aura au total et je veux que les lignes soient correctes aux différents points d'arrêt de l'écran.
  • Les colonnes de cette ligne sont de tailles différentes à différents points d'arrêt (par exemple, col-sm-6 col-lg-4).
  • Dans chaque `` ligne affichée '' individuelle, par exemple, une ligne de cartes affichée à l'écran à un moment donné, chaque carte doit avoir la même hauteur.
  • Chaque carte doit avoir une marge en bas afin qu'elle soit séparée de toutes les autres cartes.

J'ai réussi à faire presque tout le chemin, mais je rencontre un problème: définir class="h-100" sur mes cartes pour m'assurer qu'elles sont toutes de la même hauteur tue la marge du bas de chaque carte.

Existe-t-il un moyen de garantir que toutes les cartes d'une ligne affichée donnée ont la même hauteur, tout en conservant une marge au bas de celles-ci?

Code HTML: 

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

Démo JSFiddle

cssheightbootstrap-4marginbootstrap-grid
13
Sam

Après un peu d'expérimentation, celle-ci était facile à résoudre: j'avais besoin d'ajouter la classe mb-4 à la contenant colonne, pas la carte elle-même:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

J'espère que cela aide les autres qui sont coincés dans ma même situation.

14
Sam