css - number - center card bootstrap

Bootstrap 4 card-deck con número de columnas basado en viewport

Question

Estoy intentando implementar la característica de la baraja de cartas en bootstrap 4 para hacer que todas mis cartas tengan la misma altura.

Los ejemplos que Bootstrap proporciona muestran 4 bonitas tarjetas, pero son 4 tarjetas en la fila, sin importar la ventana gráfica. Vea el código here .

Esto no tiene sentido para mí, ya que supondría que querría un tamaño mínimo para que su tarjeta se reduzca para que su contenido aún se vea bien.

Luego intenté agregar algunas clases de viewport para dividir el tamaño de la pantalla, pero tan pronto como se agrega esa división, la baraja de cartas ya no se aplica, por lo que las cartas no tienen la misma altura.

¿Cómo puedo lograr esto? ¿Es esta una característica faltante que se abordará en la versión completa de Bootstrap 4?

Aquí está el violín: https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>It''s really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
<footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
<footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>There are also some interesting new text classes for uppercase and capitalize.</p>
<footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>If you want to use cool icons in Bootstrap 4, you''ll have to find your own such as Font Awesome or Ionicons.</p>
<footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>It''s really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
<footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
<footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>There are also some interesting new text classes for uppercase and capitalize.</p>
<footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>If you want to use cool icons in Bootstrap 4, you''ll have to find your own such as Font Awesome or Ionicons.</p>
<footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>

Answer 1

Aquí hay una solución con Sass para configurar el número de tarjetas por línea según los puntos de interrupción: https://codepen.io/migli/pen/OQVRMw

Funciona bien con Bootstrap 4 beta 3

// Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$grid-gutter-width: 30px !default;
// number of cards per line for each breakpoint
$cards-per-line: (
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5
);
@each $name, $breakpoint in $grid-breakpoints {
@media (min-width: $breakpoint) {
.card-deck .card {
flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
}
}
}

Answer 2

Hay una solución más sencilla para eso: establecer la altura fija de los elementos de la tarjeta : encabezado y cuerpo. De esta manera, podemos establecer un diseño con una cuadrícula de columnas de refuerzo estándar.

Aquí está mi ejemplo: http://codeply.com/go/RHDawRSBol

 <div class="card-deck text-center">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body" style="height: 20rem">
<h4 class="card-title">1 Card title</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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>

Answer 3

Me tomó un poco resolver esto, pero la respuesta es no usar una baraja de cartas, sino usar .row y .col s.

Esto hace un conjunto de tarjetas receptivas con detalles específicos para cada tamaño de pantalla: 3 tarjetas para xl , 2 para lg y md , y 1 para sm y xs . .my-3 pone un relleno en la parte superior e inferior para que se vean bien.

mixin postList(stuff)
.row
- site.posts.each(function(post, index){
.col-sm-12.col-md-6.col-lg-6.col-xl-4
.card.my-3
img.card-img-top(src="...", alt="Card image cap")
.card-body
h5.card-title Card title #{index}
p.card-text Some quick example text to build on the card title and make up the bulk of the cards content.
a.btn.btn-primary(href="#") Go somewhere
- })

Answer 4

Actualizado 2018

Si desea un mazo de tarjetas con capacidad de respuesta , use las utilidades de visibilidad para forzar un ajuste de cada X columnas en diferentes anchos de vista (puntos de interrupción) ...

Bootstrap 4 mazo de cartas sensible (v 4.1 )

Respuesta original para Bootstrap 4 alpha 2:

Puede usar la col-*-* cuadrícula col-*-* para obtener los diferentes anchos (en lugar de la baraja de cartas) y luego establecer la misma altura a las columnas con flexbox.

.row > div[class*=''col-''] {
display: flex;
flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2 (alfa 2)

El problema es que, sin la función de flexbox habilitada, la card-deck usa table-cell donde resulta muy difícil controlar el ancho. A partir de Bootstrap 4 Alpha 6, flexbox es el predeterminado, por lo que no es necesario el CSS adicional para flexbox, y la clase h-100 puede usarse para completar la altura de las tarjetas : http://www.codeply.com/go/gnOzxd4Spk

Pregunta relacionada: Bootstrap 4 - Cartas responsivas en tarjeta-columnas

Answer 5

<div class="w-100 d-lg-none mt-4"></div>

Creé 4 tarjetas y coloco este código entre la segunda y la tercera tarjeta, intente esto.