Les cartes en colonnes s'écoutent les unes les autres

Question

Je suis confronté à un problème frustrant.

J'ai un contenant, avec une rangée à trois colonnes. Ces lignes fusionnent pour empiler sur un écran mobile.

Le contenu des cartes, lorsqu'elles sont plus longues qu'une ligne, passe à la deuxième ligne. Ceci, cependant, crée un déséquilibre. Cela rendra la zone de texte de la carte avec le texte plus long plus haut en hauteur.

Est-il possible de faire en sorte que les autres zones de texte de la carte adoptent la hauteur de la boîte avec plus de texte?

En outre, un moyen de résoudre le problème odieux zéro ligne d'interligne? J'ajoute un violon en ce moment même.

Cheers, Anna

Fiddle: Notez que vous devez mesure de la largeur de l'aperçu à la tablette ou plus.

<div class="container content"> 
    <!-- Line-up --> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <h1 class="display-4 irie-red text-center">Dub Castle</h1> 
     <div class="card rounded"> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item text-center text-primary">Thursday</li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">4PM - 6PM</p> 
      <p>Chalice SoundsystemArtist Artist Artist ArtistArtist Artist Artist Artist</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">6PM - 8PM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">8PM - 10PM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">10PM - 12PM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">12PM - 2AM</p> 
      <p>Chalice Soundsystem</p> 
      </li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">2AM - 3AM</p> 
      <p>Chalice Soundsystem Artist Artist Artist Artist</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <h1 class="display-4 text-center">Main Stage</h1> 
     <div class="card rounded"> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item text-center text-primary">Thursday</li> 
      <li class="lineup fix-sticky list-group-item"> 
      <p class="text-danger">4PM - 6PM</p> 
      <p>Mo'Kalamity & The Wizards</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">6PM - 8PM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">8PM - 10PM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">10PM - 12PM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">12PM - 2AM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">2AM - 3AM</p> 
      <p>Mo'Kalamity</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <h1 class="display-4 text-muted text-center">Open Mind</h1> 
     <div class="card rounded"> 
     <ul class="list-group list-group-flush"> 
      <li class="list-group-item text-center text-primary">Thursday</li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">4PM - 6PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">6PM - 8PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">8PM - 10PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">10PM - 12PM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">12PM - 2AM</p> 
      <p>Kabouter Plop</p> 
      </li> 
      <li class="lineup fix-collapse list-group-item"> 
      <p class="text-danger">2AM - 3AM</p> 
      <p>Kabouter Plop</p> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    </div> 
    <div class="row"></div> 
    <!-- Additional artist info --> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div class="card rounded youtube"> 
     <p class="text-center">Artist Info 1</p> 
     <div class="embed-responsive embed-responsive-16by9 rounded-iframe"> 
      <iframe src="https://www.youtube.com/embed/49XqJQRKU-0" frameborder="0"></iframe> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="card rounded youtube"> 
     <p class="text-center">Artist Info 2</p> 
     <div class="embed-responsive embed-responsive-16by9 rounded-iframe"> 
      <iframe src="https://www.youtube.com/embed/49XqJQRKU-0" frameborder="0"></iframe> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/DTcHh/

Answer 1

http://getbootstrap.com/docs/4.0/components/card/#card-layout

Bootstrap-4 vous permet d'obtenir des cartes colonne de largeur et de même hauteur avec .card-groupe ou le pont .card, mais de 4,0-bêta, ces options ne sont pas encore réactifs.