Así que en Bootstrap v4, veo que hay una nueva característica para cubiertas de tarjeta ( http://v4-alpha.getbootstrap.com/components/card/#decks ) que hace que un grupo de tarjetas, con su altura equivalente de acuerdo a los más altos contenidos en el grupo.

Aparece el número de columnas se basa en cuántos tarjeta-div son en el grupo. Es allí una manera de hacer que el número de columnas de cambio basado en la ventanilla? Por ejemplo, 4 columnas /tarjeta de ancho en gran anchura, 2 de ancho en medio de ancho, y 1 en pequeñas ancho?

Actualmente permanecen el mismo número de columnas/tarjetas de ancho hasta menos de 544px. En 544px y mayores, que han display: table-cell con el screen (min-width: 544px) regla.

Hay una manera para hacer las tarjetas tienen un número diferente de columnas basadas en ventanilla cambiando sólo el CSS?

Editar – con la intención de no utilizar flex /flexbox debido a IE apoyo

Codepen ejemplo de 4 col/tarjeta de ancho y 3 col/tarjeta de ancho en http://codepen.io/jpost-vlocity/full/PNEKKy/

OriginalEl autor jpostdesign | 2016-04-07

4 Comentarios

  1. 9

    He encontrado una muy fácil solución mediante el uso de css-grid. Usted puede ajustar el 250px para que se ajuste a su caso de uso.

    .card-deck {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: .5rem;
    }
    Utiliza esta opción para mostrar una cantidad ilimitada de Cartas correctamente, funciona mucho mejor que reactstrap CardDesk por ejemplo. Impresionante. 🙂
    En mi caso yo uso auto-fill en lugar de auto-ajuste como el número de tarjetas que varía de 1 a 100 y si el conteo de cartas es inferior a 5, la brecha entre las tarjetas de conseguir aumentar para que quepa dentro del div padre.
    Muy elegante aproach

    OriginalEl autor esitarz

  2. 8

    Actualización de 2018

    Resulta difícil establecer las tarjetas anchos (de respuesta) con card-deck porque utiliza display:table-cell y width:1%.

    Me pareció más fácil para hacerlos sensibles a través de las tarjetas dentro de la Bootstap cuadrícula col-* y, a continuación, puede utilizar la cuadrícula de la ventanilla puntos de interrupción. Habilitar Bootstrap del flexbox si quieres las cartas para ser igual a la altura como el card-deck.

    http://www.codeply.com/go/6eqGPn3Qud

    También, img-responsive ha cambiado a img-fluid

    Bootstrap 4.0.0

    Flexbox ahora es el valor predeterminado, pero todavía no hay un apoyado manera de hacer sensible la tarjeta de la cubierta. La forma recomendada es el uso de tarjetas dentro de la red:

    Sensible cartas usando la cuadrícula

    Otra manera de hacer una capacidad de respuesta de la tarjeta de la cubierta, es el uso sensible de restablecimiento de divs cada x columnas. Esto obligará a las tarjetas de envolver en determinados puntos de interrupción.

    Por ejemplo: 5 xl, 4 de lg, 3 en md, 2 en el sm, etc..

    Sensible cubierta de tarjeta de demostración (4.0.0)

    Sensible cubierta de tarjeta de demostración (alfa 6)

    CSS pseudo elementos de variación

    Hay una manera de hacerlo sin la flex / flexbox? Para IE apoyo de curso

    OriginalEl autor Zim

  3. 5

    Aquí tienes,
    http://codepen.io/KarlDoyle/pen/pypWbR

    Lo principal es que usted tiene que reemplazar los estilos. como se muestra a continuación.

    .card-deck {
      display: flex;
      justify-content: flex-start;
      flex-flow: row wrap; 
      align-items: stretch;
    }
    .card-deck .card {
      display: block;
      flex-basis: 33.3%; /* change this value for each breakpoint*/
    }
    Hay una manera de hacerlo sin la flex / flexbox? Para IE apoyo de curso
    usted podría utilizar un polyfill github.com/10up/flexibility o usted puede crear su propio componente que no depende de flex y el uso de flotadores en su lugar. También echa un vistazo a esta solución alternativa que puede ser de ayuda css-tricks.com/forums/topic/flexbox-with-fallback
    Sólo un punto, Bootstrap & Flexbox – en cuanto a la ayuda para IE v4-alpha.getbootstrap.com/getting-started/flexbox

    OriginalEl autor Karl Doyle

  4. 1

    Bootstrap 4 cartas de la baraja sensible

    Traté de usar la <container>, <row> y <col> para hacerla sensible, pero se pierde la

    Todas las cartas tienen la misma altura

    característica de la baraja de cartas, si haces eso.
    Lo que usted necesita es CSS:

    .card-deck {
      margin: 0 -15px;
      justify-content: space-between;
    }
    
    .card-deck .card {
      margin: 0 0 1rem;
    }
    
    @media (min-width: 576px) and (max-width: 767.98px) {
      .card-deck .card {
        -ms-flex: 0 0 48.7%;
        flex: 0 0 48.7%;
      }
    }
    
    @media (min-width: 768px) and (max-width: 991.98px) {
      .card-deck .card {
        -ms-flex: 0 0 32%;
        flex: 0 0 32%;
      }
    }
    
    @media (min-width: 992px)
    {
      .card-deck .card {
        -ms-flex: 0 0 24%;
        flex: 0 0 24%;
      }
    }

    Aquí está mi CodePen:
    Bootstrap 4 cartas de la baraja sensible

    OriginalEl autor FrankieDoodie

Dejar respuesta

Please enter your comment!
Please enter your name here