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

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>

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

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.

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>

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

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

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>

envuelve las cartas dentro

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

o

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

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:

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>

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>

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.

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>

Esto funcionó bien para mi:

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

forzando nuestro CSS sobre el CSS general de bootstraps.

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

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

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.