¿Cómo hacer que las tarjetas Bootstrap 4 tengan la misma altura en columnas de tarjetas?

134

Estoy usando Bootstrap 4 alpha 2 y aprovechándome de las cartas. 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="..." 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>

— blueSurfer
fuente

¿Algún esfuerzo hasta ahora? ¿Algún código para compartir?

— baao

2

Ese ejemplo es para columnas tipo mampostería. El objetivo de ese estilo es que las cartas son de diferentes alturas. Use una plataforma y habilite el modo flexbox si desea alturas iguales.

— Quentin

1

La baraja solo funciona para cartas seguidas. Lo que quiero es el mismo efecto card-columnspero manteniendo la misma altura.

— blueSurfer

163

¿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://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ía una altura mínima o incluso peor, una altura fija?

Pensé que este problema (alturas iguales) era parte del motivo de la progresión fuera de los divs de bloques flotantes.

— Kerry7777
fuente

3

h-100 no es una altura fija, el mismo de la altura a 100% (de la fila)

— konyak

esta debería ser la respuesta

— ACed

Esta es la respuesta real

— Andrew Bullock

@konyak sí, me doy cuenta de ese amigo. No me refiero a h-100 (desplácese hacia abajo en esta página).

— Kerry7777

139

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 codigo:

<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 "card h-100" he colocado 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.

— usuario3350279
fuente

16

tan simple h-100

— PNC

9

.h-100 - brillante

— JCraine

2

Esto funcionó para mí cuando d-flexcausó problemas con IE (que tengo que admitir). Acabo de agregar un mb-4div principal para separar las tarjetas un poco más.

— Charles Paske

y también puede usar .pre-scrollable para hacer que se desplace verticalmente

— Muhammad Waqas Aziz

Agregaría la clase .py-2 a todos los divs con la clase .col- * para agregar relleno entre las filas.

— Konyak

93

La mejor solución, Bootstrap 4 tiene todo lo que necesita: USE THE .d-flexy .flex-fillclass. No use el card-decksya que no responden. Usé col-sm, puedes usar la .colclase que quieras o usarcol-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 muchas, luego 3 o 4 por columna

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>

Expandir fragmento

— djibe
fuente

1

¡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.

— Getsomepeaches

Esto funcionó para mí. Tengo una columna con una tarjeta grande y, a la derecha, otra columna con dos filas. entonces, la carta de la izquierda toma la altura de las dos filas adyacentes, ¡gracias!

— Erich García

Este era el camino a seguir. Lo intenté card-columns pero no podía tomar más de 3 columnas por fila. Gracias por esta respuesta

— Yeku Wilfred Chetat

la baraja de cartas no funcionaba en mi caso, ¡tu respuesta funcionó!

— TBG

31

Puede aplicar la clase h-100, que significa altura 100%.

— bsesico
fuente

12

ACTUALIZACIÓN: En Bootstrap 4 , flexbox ahora es predeterminado y cada card-deckfila contendrá 3 tarjetas. Las tarjetas se llenarán a su altura máxima.

http://www.codeply.com/go/x91w5Cl6ip

Bootstrap 4 alpha card-columnsusa columnas CSS3 que realmente 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, puede usar card-decky 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

Tarjeta Bootstrap relacionada
de la misma altura en Col

— Zim
fuente

He bifurcado su código para probar algo; Necesito que los títulos se estiren para tener la misma altura también, lo que no sucede aquí: codeply.com/go/fqnQZ2ZGJy - conozco alguna forma de que mis "títulos más cortos" tomen la misma altura que título más largo? He intentado jugar con flexbox y grids, pero parece que no puedo hacerlo bien.

— Davewoodhall

11

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>

— Mella
fuente

4

envuelve las cartas dentro

<div class="card-group"></div>

o

<div class="card-deck"></div>

— Mujtaba Kably
fuente

3

Adopté un enfoque ligeramente diferente. Utilizando la envoltura de la baraja de cartas

Agregué una regla de estilo que limita la altura del bloque de cartas:

.card .card-block {max-height:300px;overflow:auto;}

Esto da el siguiente resultado:

— skrile
fuente

3

Puedes usar el mazo de cartas, 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="..." 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="..." 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="..." 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>

— Jeyglo
fuente

2

Otro enfoque útil son las cuadrículas de tarjetas :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Expandir fragmento

— Antonio Petricca
fuente

1

La forma más mínima de lograr esto (que yo sepa) :

Aplicar .text-monospacea todos los textos de la tarjeta.
Limite todos los textos de las tarjetas a la misma cantidad de caracteres.

ACTUALIZAR

Agregue .text-truncateel título de la tarjeta y otros textos. Esto obliga a los textos a tener una sola línea. Hacer que las cartas tengan la misma altura.

— doncadavona
fuente

Creo que estás muy equivocado con esta respuesta. Cada tarjeta o sección de una página web en funcionamiento tendrá claramente diferentes cantidades de texto (caracteres) y utilizará fuentes / tipos de letra que no sean monoespaciados. ¿Por qué querría truncar el contenido de texto que los visitantes (no pueden) leer?

— Kerry7777

@ Kerry7777, es posible que desee truncar una cadena larga y agregar un "..." al final para que los usuarios sepan que se ha truncado. Para que puedan leer la cadena completa, deberán hacer clic o colocar el cursor sobre ella. De esa forma, podemos hacer coherencia en los contenidos mostrados. Porque los contenidos no son los mismos. Algunas son cortas, otras son largas y nuestro espacio de pantalla es limitado.

— doncadavona

1

En algunos casos, es solo la longitud del texto lo que hace que las tarjetas tengan una altura desigual. Entonces esta respuesta es útil.

— Mohammed Shareef C

1

Soy un novato en esto, así que por favor perdóneme si me estoy perdiendo algo.

Probé muchos de los anteriores. Si establece la altura = 100%, la tarjeta siempre se expandirá a la mayor longitud de la tarjeta más larga. El contenedor limitará todos a la misma longitud.

Quería ver el contenedor, así que usé el color de fondo para ayudarme a ver lo que estaba pasando.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

— csaw
fuente

0

Esto funcionó bien para mi:

<div class="card card-body " style="height:80% !important">

forzando nuestro CSS sobre el CSS general de bootstraps.

— Prajapati Zenish
fuente

0

Me encontré con este problema, la mayoría de la gente usa jQuery ... Aquí estaba mi solución. "No te preocupes, solo soy un principiante en esto ..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Si la altura de cualquier elemento de la tarjeta es, por ejemplo, 400px (según su contenido), debido a que el valor predeterminado para flex-align es stretch, entonces .card-item (hijo de la fila o clase de colección de tarjetas) se estirará. hacer que la altura de la tarjeta sea 100% de la del padre ocupará esta altura completa.

Espero estar en lo correcto. Soy yo

— Alb Rick Bi
fuente

-3

Si alguien está interesado, hay un complemento de 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 causan fallas en complementos similares.

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
});

— rlu7732
fuente

-12

jsfiddle

Simplemente agregue la altura que desee con CSS, ejemplo:

.card{
    height: 350px;
}

Deberá agregar su 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.

— PlatinumJay
fuente

Parece que el contenido de las tarjetas no está alineado correctamente. Esta solución es demasiado manual Me pregunto si hay algo más "inteligente"

— blueSurfer

Puede probar algo con jQuery para crear dinámicamente la altura. Depende de lo que quieras hacer con ellos.

— PlatinumJay

Tengo mucha curiosidad por saber por qué hay tantos votos en contra de la respuesta. porque parece que funciona

— Kick Buttowski

2

¿No significa esto que la tarjeta permanece a una altura fija, no a una altura igual de respuesta?

— Robert Andrews