Estoy tratando de implementar la tarjeta de la cubierta característica en bootstrap 4 para hacer que todos mis tarjetas de la misma altura.

Los ejemplos que bootstrap proporciona mostrar 4 cartas buenas, pero las 4 cartas de la fila, no importa el área de visualización. Ver el codeply aquí.

Esto no tiene sentido para mí, ya que, quiero suponer, que desea un tamaño mínimo de la tarjeta de reducir en orden para que su contenido todavía se ven bien.

Luego traté de añadir en algunos ventanilla clases para romper en tamaños de pantalla, pero tan pronto como el div se agrega, la tarjeta de la cubierta no se aplica ya, por lo tanto no hacer las cartas igual a la altura.

¿Cómo puedo lograr esto? Es esta una característica que falta que serán abordados 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>
InformationsquelleAutor ganders | 2016-04-05

10 Comentarios

  1. 53

    Actualizado 2018

    Si quieres un sensible de la tarjeta de la cubierta, utilice la visibilidad utils para forzar una envoltura cada X columnas de diferente ancho de ventana(puntos de corte)…

    Bootstrap 4 sensible tarjeta de la cubierta (v 4.1)


    Respuesta Original para el Bootstrap 4 alpha 2:

    Puede uso de la cuadrícula col-*-* para obtener los diferentes anchos (en lugar de la tarjeta de la cubierta) y, a continuación, establezca la misma altura a los cols uso de flexbox.

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

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

    El problema es que w/o flexbox habilitado el card-deck utiliza table-cell donde se hace muy difícil controlar el ancho. Como de Bootstrap 4 Alpha 6, flexbox es el valor predeterminado de manera adicional, el CSS no es necesaria para flexbox, y el h-100 clase se puede utilizar para hacer las tarjetas de altura completa: http://www.codeply.com/go/gnOzxd4Spk


    Relacionadas con la pregunta:
    Bootstrap 4 – Sensibles de las tarjetas de la tarjeta-columnas

    • Se me olvidaba, es flexbox habilitado por defecto en Bootstrap 4?
    • Gotcha, se preguntaba por qué no estaba trabajando en mi violín. Voy a tener que jugar con ella, cuando llego a casa, así que se puede convertir en flexbox…
    • Alguna idea de cómo hacer tarjetas en la última fila tiene el mismo anchos como cualquier otro filas?
    • Empecé con esta respuesta y era complicado hacer un diseño dinámico como este. Mejor usar .row y .col clases para la respuesta. Véase la respuesta a continuación.
    • Mi respuesta ya dice que el uso de la cuadrícula de col en lugar de una tarjeta de la cubierta del
    • Me encontré con algunas rarezas en los que las tarjetas no ajustan correctamente con el divs en el ejemplo. Deshacerse de la w-100 fijo para mí. el uso de bootstrap4.1.3 en Chrome

  2. 32

    He aquí una solución con Sass para configurar el número de tarjetas por línea dependiendo de 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});
    }
    }
    }

    EDITAR (2019/10)

    He trabajado en otra solución que utiliza de las listas horizontales grupo + flex utilidades en lugar de la tarjeta de la cubierta:

    https://codepen.io/migli/pen/gOOmYLb

    Es una solución fácil para organizar cualquier tipo de elementos en una cuadrícula de respuesta

    <div class="container">
    <ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <!--= add as many items as you need  =-->
    </ul>
    </div>
    .list-group-item {
    width: 95%;
    margin: 1% !important;
    }
    @media (min-width: 576px) {
    .list-group-item {
    width: 47%;
    margin: 5px 1.5% !important;
    }
    }
    @media (min-width: 768px) {
    .list-group-item {
    width: 31.333%;
    margin: 5px 1% !important;
    }
    }
    @media (min-width: 992px) {
    .list-group-item {
    width: 23%;
    margin: 5px 1% !important;
    }
    }
    @media (min-width: 1200px) {
    .list-group-item {
    width: 19%;
    margin: 5px .5% !important;
    }
    }
    • ¿cómo es el trabajo para usted? Para mí rompe muchas cosas ..
    • No romper nada para mí. Ver el CodePen enlace en la respuesta: codepen.io/migli/pen/OQVRMw. Cuando me cambio de $tarjetas por línea, el número de tarjetas se cambia en consecuencia.
    • Veo, ty. Tal vez tengo demasiado CSS personalizado y que ya hay un conflicto en algún lugar. Tratará de encontrar .
    • Funciona como un encanto, también con bootstrap v 4.1.1. Gracias.
    • Funciona bien en todas partes, excepto IE 11. Alguna solución?
    • Es decir, está definitivamente muerto
    • En el Diseño de Tarjetas de documentación aparece este mensaje: «estas opciones de diseño aún no están sensible». Tal vez no sea una buena idea el uso de ellos, sin embargo
    • Esa es exactamente la razón por la que he propuesto esta solución – que ahora está sensible.
    • Sí, @migli, pero mi proyecto es básicamente para uso del gobierno, ellos todavía como el uso de windows 7 e internet explorer. Bootstrap 4.1 me rescató con la misma altura de las columnas y h-100 clase.
    • Los gobiernos siempre están a la vanguardia de la tecnología!
    • Esta es una gran solución inteligente, funciona como un encanto para mí. Sin EMBARGO, me parece que no puede mantener un mínimo de 2 cartas de cada fila en xs pantallas (usando bootstrap 4). Alguna idea?
    • El valor predeterminado responsive Bootstrap tarjeta de columnas de inicio en 576px: (a)media (min-width: 576px) .tarjeta de la cubierta { -ms-flex-flujo: fila wrap, el flex-flujo: fila envoltura; margin-right: -15px; margin-left: -15px; } Reemplazar con (a)media (min-width: 0) y el conjunto de $tarjetas-por-línea 2 xs de Esta manera va a estar bien
    • Yo sugiero utilizar $card-deck-margin en lugar de $grid-gutter-width: flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$card-deck-margin * 2});

  3. 9

    Tengo este trabajo mediante la adición de un min-width a las cartas:

    <div class="card mb-3" style="min-width: 18rem;">
    <p>Card content</p>
    </div>

    Las tarjetas no ir por debajo de este ancho, pero todavía rellene cada fila y de igual altura.

    • Una gran solución para un problema significativo en Bootstrap
  4. 5
    <div class="w-100 d-lg-none mt-4"></div>

    He creado 4 cartas y colocar este código entre la segunda y la tercera tarjeta, intenta esto.

    • Solución agradable, pero para hacer el trabajo que usted necesita para eliminar d-lg-none de la clase, de modo que le sea <div class="w-100 mt-4"></div>
  5. 1

    He usado CSS Grid para arreglar eso.
    CSS Grid hará que todos los elementos de la misma fila, todos de la misma altura.

    No he mirado en la fabricación de todos los elementos en todas las filas de la misma altura, aunque.

    De todos modos, aquí es cómo se puede hacer:

    HTML:

    <div class="grid-container">
    <div class="card">...</div>
    <div class="card">...</div>
    </div>

    CSS:

    .grid-container {
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    Aquí una completa JSFiddle.
    https://jsfiddle.net/bluegrounds/owjvhstq/4/

  6. 0

    Esta respuesta es para aquellos que están usando Bootstrap 4.1+ y para aquellos que se preocupan es decir, 11 así

    De la tarjeta de la cubierta no se adapta el número visible de las cartas según el tamaño de la ventana.

    Por encima de los métodos de trabajo, pero no el apoyo de IE. Con el siguiente método, se puede lograr una funcionalidad similar y sensible a las cartas.

    Puede administrar el número de tarjetas para mostrar/ocultar en diferentes puntos de interrupción.

    De inicio 4.1+ columnas están a la misma altura por defecto, sólo asegúrese de que su tarjeta/contenido utiliza todo el espacio disponible.
    Ejecutar el fragmento de código, vas a entender

    HTML:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container">
    <div class="row">
    <div class="col-sm-6 col-lg-4 mb-3">
    <div class="card mb-3 h-100">
    <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 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>
    <div class="col-sm-6 col-lg-4 mb-3">
    <div class="card mb-3 h-100">
    <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 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>
    <div class="col-sm-6 col-lg-4 mb-3">
    <div class="card mb-3 h-100">
    <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 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>
    </div>
    </div>

    • Pregunta requiere el uso de CardDeck
    • Sí @IanWarner. He utilizado CardDeck con las actualizaciones sugeridas en las respuestas anteriores, pero para mi suerte, he tenido que soportar IE y nada parecía funcionar, he resuelto mediante este método.
  7. 0

    Me gusta Spanomaly simple solución por encima de la configuración de la min-width estilo. Tenga en cuenta que se aplica a la tarjeta de elemento.

    Esto también ayuda a resolver el problema de otro – tener tarjetas que no son parte de toda una fila de ser la misma que la anchura de los que son. Simplemente ajusta el ancho máximo de estilo para ser el mismo que el min-width.

  8. 0

    Definir las columnas por min anchura basada en ventanilla:

    
    /* Number of Cards by Row based on Viewport */
    @media (min-width: 576px) {
    .card-deck .card {
    min-width: 50.1%; /* 1 Column */
    margin-bottom: 12px;
    }
    }
    @media (min-width: 768px) {
    .card-deck .card {
    min-width: 33.4%;  /* 2 Columns */
    }
    }
    @media (min-width: 992px) {
    .card-deck .card {
    min-width: 25.1%;  /* 3 Columns */
    }
    }
    @media (min-width: 1200px) {
    .card-deck .card {
    min-width: 20.1%;  /* 4 Columns */
    }
    }
  9. -1

    Hay solución más simple para que – conjunto de altura fija de la tarjeta de elementos – encabezado y el cuerpo. De esta manera, se puede establecer el diseño resposive con el estándar de boostrap columna de la cuadrícula.

    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>
    • Pero esta no es la manera estándar.
    • Si lo haces de esta manera que usted tiene que saber cuánto de contenido que hay en sus cartas en todo momento. Esto no funciona para el contenido dinámico.
  10. -4

    Me costó un poco entenderlo, pero la respuesta es no utilizar una tarjeta de la cubierta, pero en lugar de utilizar .row y .cols.

    Esto hace un sensible conjunto de tarjetas con características específicas 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 y la parte inferior para que se vea 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
    - })
    • Este método no permite establecer la altura de las tarjetas a igual altura, como una tarjeta del mazo no.

Dejar respuesta

Please enter your comment!
Please enter your name here