html - examples - crear tarjetas con bootstrap
¿Cómo hacer que las cartas Bootstrap 4 tengan la misma altura en columnas de cartas? (11)
¿Puedes poner las clases en la "fila" o en la "columna"? No será visible en las tarjetas (borde) si lo usa en la fila. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
Algunas de las otras respuestas aquí parecen ''extravagantes''. ¿Por qué usar una altura mínima o, peor aún, una altura fija?
¿Pensé que este problema (alturas iguales) era parte de la razón de la progresión lejos de los bloques flotantes?
Estoy usando Bootstrap 4 alpha 2 y aprovecho las cartas. Específicamente, estoy trabajando con este ejemplo tomado de los documentos oficiales. Como dice el título, ¿cómo puedo hacer que todas las tarjetas tengan la misma altura?
EDITAR: 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 el 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="..." 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="..." 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="..." 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>
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>
Estoy usando Bootstrap 4 (Beta 2). Mientras tanto, las situaciones parecen 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" he hecho que las tarjetas respondan. 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.
La forma más mínima de lograr esto (que yo sepa) :
-
Aplique
.text-monospacea todos los textos en la tarjeta. - Limite todos los textos en las tarjetas al mismo número de caracteres.
ACTUALIZAR
Agregue
.text-truncate
en el título de la tarjeta u otros textos.
Esto fuerza los textos a una sola línea.
Hacer que las cartas tengan la misma altura.
La mejor solución, Bootstrap 4 tiene todo lo que necesita: USE LA clase
.d-flex
y
.flex-fill
.
No use los
card-decks
ya que no responden.
.col
col-sm
, puedes usar la clase
.col
que quieras.
Aquí está la bestia, intente reducir la ventana del navegador a XS para verla 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>
Puede aplicar la clase
h-100
, que significa altura 100%.
Si alguien está interesado, hay un complemento jquery llamado: jquery.matchHeight.js
https://github.com/liabru/jquery-match-height
matchHeight hace que la altura de todos los elementos seleccionados sea exactamente igual. Maneja muchos casos extremos que hacen que los complementos similares fallen.
Para una fila de cartas, uso:
<div class="row match-height">
Luego habilite todo el sitio:
$(''.row.match-height'').each(function() {
$(this).find(''.card'').not(''.card .card'').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});
Tomé un enfoque ligeramente diferente. Usar el envoltorio de la baraja de cartas
Agregué una regla de estilo que limita la altura del bloque de la tarjeta:
.card .card-block {max-height:300px;overflow:auto;}
envolver las tarjetas dentro
<div class="card-group"></div>
o
<div class="card-deck"></div>
ACTUALIZACIÓN:
en
Bootstrap 4
, flexbox ahora es el predeterminado, y cada fila del
card-deck
contendrá 3 cartas.
Las tarjetas se llenarán a toda su altura.
http://www.codeply.com/go/x91w5Cl6ip
Las
card-columns
alfa Bootstrap 4 utilizan
card-columns
CSS3 que realmente no admiten alturas iguales (excepto el relleno de columnas que solo se admite en Firefox).
Si, en cambio, habilita el modo Bootstrap 4 flexbox, podría usar el
card-deck
y un poco de CSS para igualar la altura y ajustar cada 3 columnas.
@media (min-width:34em) {
.card-deck > .card
{
width: 29%;
flex-wrap: wrap;
flex: initial;
}
}
http://codeply.com/go/YFFFWHVoRB
Relacionado
Tarjeta Bootstrap de la misma altura en columna
Simplemente agregue la altura que desee con CSS, por ejemplo:
.card{
height: 350px;
}
Tendrás que agregar tu propio CSS.
Si revisa la documentación, esto es para el estilo de mampostería ; el punto es que no todos tienen la misma altura.