html - examples - crear tarjetas con bootstrap

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

Question

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>

Answer 1

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

Answer 2

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>

Answer 3

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.

Answer 4

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

• Aplique .text-monospace a 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.

Answer 5

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>

Answer 6

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

Answer 7

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

Answer 8

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

Esto da el siguiente resultado:

Answer 9

envolver las tarjetas dentro

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

o

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

Answer 10

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

Answer 11

jsfiddle

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.