surfista azul
Estoy usando Bootstrap 4 alpha 2 y estoy aprovechando las tarjetas. Específicamente, estoy trabajando con este ejemplo tomado de los documentos oficiales. ¿Cómo puedo hacer que todas las tarjetas tengan la misma altura?
Todo lo que puedo pensar ahora es establecer la siguiente regla CSS:
.card {
min-height: 200px;
}
Pero esa es solo una solución codificada que no funcionará en un caso general. El código en mi opinión es el mismo que el de los documentos, es decir:
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-block">
<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.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<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.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<img class="card-img" data-src="https://stackoverflow.com/questions/35868756/..." alt="Card image">
</div>
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block">
<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 card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
Kerry7777
¿Puede poner las clases en la “fila” o en la “columna”? No será visible en las tarjetas (borde) si lo usa en la fila.
https://getbootstrap.com/docs/4.6/utilities/flex/#align-items
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<!--CARD HERE-->
</div>
</div>
</div>
ACTUALIZAR BS5 EJEMPLO HTML COMPLETO
-
h-100 no es una altura fija, es una altura al 100% (de la fila)
– konyak
18 oct 2019 a las 18:57
-
@konyak sí, me doy cuenta de eso amigo. No me refiero a h-100 (desplácese hacia abajo en esta página).
– Kerry7777
5 de mayo de 2020 a las 5:32
-
@ Kerry7777 ¡gracias por la aclaración tan necesaria, BUDDY! Además, para mi caso, era fundamental agregar d-flex align-items-stretch a los divs manteniendo mis tarjetas, pero también necesitaba agregar
h-100a la tarjeta y a los pies de página de la tarjeta para asegurarse de que todos coincidan– Kyle Burkett
11 de agosto de 2020 a las 17:30
-
La solución técnicamente correcta es usar una baraja de cartas Bootstrap. Sin embargo, esta solución funciona al 100%.
– Leander
1 de diciembre de 2021 a las 10:17
Estoy usando Bootstrap 4 (Beta 2). Mientras tanto, la situación parece haber cambiado. Tuve el mismo problema y encontré una solución fácil. Este es mi código:
<div class="container-fluid content-row">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="card h-100">
… content card …
</div>
</div>
… all the other cards …
</div>
</div>
Con “col-sm-12 col-lg-6” hice que las tarjetas respondieran. Con “tarjeta h-100” he configurado todas las tarjetas a la altura de su columna principal. En mi sistema esto funciona, pero no soy un profesional. Entonces, espero haber ayudado a alguien.
-
tan simple h-100
– PNC
8 de noviembre de 2017 a las 19:38
-
.h-100 – brillante
– JCraine
18 de febrero de 2018 a las 0:46
-
Esto funcionó para mí cuando
d-flexcausó problemas con IE (que tengo que soportar). Acabo de agregar unmb-4al div padre para separar un poco más las tarjetas.– Charles Paske
31 de mayo de 2018 a las 22:53
-
y también puede usar .pre-scrollable para hacer que se desplace verticalmente
–Muhammad Waqas Aziz
16 de julio de 2018 a las 12:25
-
Agregaría la clase .py-2 a todos los divs con la clase .col-* para agregar relleno entre las filas.
– konyak
18 oct 2019 a las 18:55
djibe
Bootstrap 4 tiene todo lo que necesitas: USA EL .d-flex y .flex-fill clase. no use el card-decks ya que no responden. solía col-smpuedes usar el .col clase que desee, o use col-lg-x la x significa el número de columna de ancho, por ejemplo, 4 o 3 para una mejor vista si la publicación tiene muchos, entonces 3 o 4 por columna
Intente reducir la ventana del navegador a XS para verlo en acción:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
<div class="row my-4">
<div class="col">
<div class="jumbotron">
<h1>Bootstrap 4 Cards all same height demo</h1>
<p class="lead">by djibe.</p>
<span class="text-muted">(thx to BS4)</span>
<p>Dependencies : standard BS4</p>
<p>
Enjoy the magic of flexboxes and leave the useless card-decks.
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
A small card content.
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
"Lorem ipsum dolor sit amet, consectetur adipiscing 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."
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
Another small card content.
</div>
</div>
</div>
</div>
</div>
</div>
</div>-
¡Esta respuesta funciona muy bien! Si no puede usar ‘card-column’ o ‘card-deck’ para obtener el comportamiento de respuesta deseado en todas las ventanas gráficas.
– Getsomemelocotones
27 de junio de 2018 a las 2:20
-
Esto funcionó para mí. Tengo una columna con una tarjeta grande ya la derecha tengo otra columna con dos filas. entonces, la carta de la izquierda toma la altura de las dos filas adyacentes, ¡gracias!
–Erich García
19 de febrero de 2019 a las 15:08
-
Este era el camino a seguir. Lo intenté
card-columnspero no podía tomar más de 3 columnas por fila. gracias por esta respuesta– Yeku Wilfred Chetat
28 de junio de 2020 a las 15:19
-
card-deck no funcionaba en mi caso, ¡tu respuesta funcionó!
– TBG
22 de julio de 2020 a las 16:18
-
Gran respuesta, y si alguien está usando BS 5, verifique el página de migración tanto ha cambiado (incluyendo cómo se distribuyen las cartas) — adiós queridos
jumbotron…– nicorelio
30 de enero de 2021 a las 0:38
Puedes aplicar la clase h-100que significa altura 100%.
Así es como lo hice:
CSS:
.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}
HTML:
<div class="row my-flex-card">
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
aaaa
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
bbbb
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
cccc
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="card-block">
dddd
</div>
</div>
</div>
</div>
ACTUALIZAR: En Arranque 4flexbox ahora es predeterminado, y cada card-deck la fila contendrá 3 cartas. Las tarjetas se llenarán hasta su altura máxima.
http://codeply.com/go/x91w5Cl6ip
El Bootstrap 4 alfa card-columns utiliza columnas CSS3 que en realidad no admiten alturas iguales (excepto el relleno de columnas, que solo se admite en Firefox).
Si, en cambio, habilita el modo flexbox de Bootstrap 4, podría usar el card-deck y un poco de CSS para igualar la altura y envolver cada 3 columnas.
@media (min-width:34em) {
.card-deck > .card
{
width: 29%;
flex-wrap: wrap;
flex: initial;
}
}
http://codeply.com/go/YFFFWHVoRB
Relacionado
Bootstrap 4 Cartas de la misma altura en columnas
jeyglo
Puedes usar card-deck, alineará todas las cartas… esto viene de la página oficial de bootstrap 4.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer 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">
<img class="card-img-top" src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">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 class="card">
<img class="card-img-top" src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
-
No funciona para mí. Lo que funciona es class=”card h-100″ codeply.com/go/jbcgzs2Nzq
– hubert17
12 abr 2021 a las 16:51
¿Algún esfuerzo hasta ahora? ¿Algún código para compartir?
– baao
8 de marzo de 2016 a las 13:36
Ese ejemplo es para columnas tipo mampostería. El objetivo de ese estilo es que las cartas son de diferente alturas Usar una cubierta y habilite el modo flexbox si desea alturas iguales.
– Quintín
8 de marzo de 2016 a las 13:47
El mazo funciona solo para cartas en una fila. Lo que quiero es el mismo efecto de
card-columnspero manteniendo la misma altura.– surfista azul
8 de marzo de 2016 a las 13:52