html - Bootstrap 4 cartas de la misma altura en columnas

css twitter-bootstrap (6)

Actualmente estoy trabajando en tarjetas de Bootstrap

Dependiendo del título del texto, obtendré una altura diferente para las tarjetas y me gustaría tener la misma altura que la más alta.

No me importa usar JS, creo que es probablemente la mejor manera de abordar el problema.

He intentado usar diferentes soluciones del CSS como usar flexbox

El HTML representado como se representa dinámicamente aquí es un ejemplo simple:

.card { float: left; width: 100%; padding: .75rem; margin-bottom: 2rem; border: 0; box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1); } .card > img { margin-bottom: .75rem; display: block; width: 80%; height: auto; margin-left: auto; margin-right: auto; } .card-text { font-size: 85%; }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>SMITE FR</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/album.css" rel="stylesheet"> <link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet"> <script src="https://www.w3schools.com/lib/w3data.js"></script> <link rel="import" href="navigation.html"> </head> <body> <div class="container"> <div class="row"> <div class="card-deck"> <div class="col-md-4 col-sm-6 col-12"><div class="card"> <img src="images/dieux/Agni.jpg" alt="BeatsX"> <h1 class="card-title">BeatsX</h1> <div class="text-center"> <p>1188.0000</p> <p>2017-06-09 10:00:00</p> <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a> </div> </div></div><div class="col-md-4 col-sm-6 col-12"><div class="card"> <img src="images/dieux/Agni.jpg" alt="Nitendo Switch"> <h1 class="card-title">Nitendo Switch</h1> <div class="text-center"> <p>2899.0000</p> <p>2017-06-10 10:00:00</p> <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a> </div> </div></div><div class="col-md-4 col-sm-6 col-12"><div class="card"> <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)"> <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1> <div class="text-center"> <p>6388.0000</p> <p>2017-06-06 10:00:00</p> <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a> </div> </div></div> </div> </div> </div> </body> </html>

Intenta darle altura a la tarjeta, mira este fiddle

.card { float: left; width: 100%; padding: .75rem; height:80vh; margin-bottom: 2rem; border: 0; box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1); }

Las columnas Bootstrap 4 ya usan flexbox, por lo que tienen la misma altura . Simplemente use h-100 para la altura: 100% en las tarjetas y llenarán las columnas ...

https://www.codeply.com/go/hKhPuxoovH

<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> <img src="images/dieux/Agni.jpg" alt="BeatsX"> <h1 class="card-title">BeatsX</h1> <div class="text-center"> <p>1188.0000</p> <p>2017-06-09 10:00:00</p> <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> <img src="images/dieux/Agni.jpg" alt="Nitendo Switch"> <h1 class="card-title">Nitendo Switch</h1> <div class="text-center"> <p>2899.0000</p> <p>2017-06-10 10:00:00</p> <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)"> <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1> <div class="text-center"> <p>6388.0000</p> <p>2017-06-06 10:00:00</p> <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a> </div> </div> </div> </div> </div>

Además, no hay razón para hacer flotar las cartas, y el .col-* debe estar directamente en el .row , no .card-deck

Por lo que sé, no es factible sin javascript o flexbox ( https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback )

Usando Flexbox tienes la misma altura de la tarjeta

.card-deck { display:flex; flex-wrap: wrap; } .card { float: left; width: 100%; height:100%; padding: .75rem; margin-bottom: 2rem; border: 0; box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1); } .card > img { margin-bottom: .75rem; display: block; width: 80%; height: auto; margin-left: auto; margin-right: auto; } .card-text { font-size: 85%; } @media (max-width:767px){ .card-deck { display:block; } }

Use flex para obtenerlo debajo de un ejemplo

.main { display: flex; } .child { flex:1; border:1px solid tomato; } .content { display: flex; justify-content: flex-start; align-items: center; flex-flow: column nowrap; } .content-child{ padding: 5px; }

<div class="main"> <div class="child"> <div class="content"> <div class="content-child"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="content-child"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> <div class="child"></div> </div>

Use el mazo de cartas para cartas de igual tamaño, el siguiente código me funciona

<div class="card-deck"> <div class="card mb-2"> <img class="card-img-top img-fluid" src="//placehold.it/500x180" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card mb-2"> <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div>

https://www.codeply.com/go/hKhPuxoovH