Bootstrap 4 cartes de la table des colonnes de la cellule réactive basée sur la fenêtre d'affichage?

Donc dans le Bootstrap v4, je vois une nouvelle fonctionnalité pour les ponts de carte ( http://v4-alpha.getbootstrap.com/components/card/#decks ) qui fait un groupe de cartes, avec leur hauteur égale selon le plus haut contenu dans le groupe.

Il semble que le nombre de colonnes en fonction du nombre de carte-div sont dans le groupe. Est-il un moyen de faire le nombre de colonnes de changement en fonction de la fenêtre d'affichage? Par exemple, 4 colonnes /carte de large à grande largeur, 2 de large au milieu de la largeur et de 1 à petite largeur?

Actuellement ils rester le même nombre de colonnes/cartes de large jusqu'à moins de 544px. Au 544px et de plus, ils ont display: table-cell avec le screen (min-width: 544px) règle.

Est-il un moyen de rendre les cartes possèdent un nombre différent de colonnes basées sur la fenêtre d'affichage en changeant seulement le CSS?

Edit - à la Recherche de ne pas utiliser flex /flexbox en raison d'IE de soutien

Codepen exemple de 4 col/carte de large et 3 col/carte de large à http://codepen.io/jpost-vlocity/full/PNEKKy/

OriginalL'auteur jpostdesign | 2016-04-07

  1. 8

    Mise à jour 2018

    Il est difficile de définir les cartes largeurs (responsive) avec card-deck car il utilise display:table-cell et width:1%.

    Je l'ai trouvé plus facile de faire de l'adapter en utilisant les cartes à l'intérieur de la Bootstap grille col-* et puis vous pouvez utiliser la grille de la fenêtre d'affichage des points d'arrêt. Activer le Bootstrap de flexbox si vous voulez des cartes à égale hauteur, comme le card-deck.

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

    Aussi, img-responsive a changé de img-fluid

    Bootstrap 4.0.0

    Flexbox est maintenant par défaut, mais il n'y a pas encore un pris en charge moyen de rendre sensible la carte du deck. La méthode recommandée consiste à utiliser des cartes à l'intérieur de la grille:

    Réactive les cartes à l'aide de la grille

    Une autre façon de faire un réactif de carte de pont, est en responsive réinitialiser tous les divs x colonnes. Cela va forcer les cartes pour envelopper à des points d'arrêt.

    Par exemple: 5 sur xl, 4, lg, 3 sur md, 2 sm, etc..

    Sensible pont de carte de démonstration (4.0.0)

    Sensible pont de carte de démonstration (alpha 6)

    CSS pseudo éléments de variation

    Est-il un moyen de le faire sans flex / flexbox? Pour IE support de cours

    OriginalL'auteur Zim

  2. 8

    Je l'ai trouvé assez simple solution de contournement à l'aide de css-grille. Vous pourriez ajuster la 250px pour s'adapter à votre cas d'utilisation.

    .card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
    Utilisé pour afficher un nombre illimité de Cartes correctement, fonctionne beaucoup mieux que reactstrap CardDesk par exemple. Génial. 🙂
    Pour mon cas j'utilise l'auto-remplissage au lieu de l'auto-ajustement que le nombre de cartes varie de 1 à 100 et si le comptage de cartes est inférieur à 5, l'écart entre les cartes d'augmenter pour s'adapter à l'intérieur de la div parent.
    Très élégant, l'approche

    OriginalL'auteur esitarz

  3. 5

    Ici, vous allez,
    http://codepen.io/KarlDoyle/pen/pypWbR

    La chose principale est que vous devez surcharger les styles. comme indiqué ci-dessous.

    .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*/
}
    Est-il un moyen de le faire sans flex / flexbox? Pour IE support de cours
    vous pouvez utiliser un polyfill github.com/10up/flexibility ou vous pouvez créer votre propre composant qui ne dépend pas de flex et à l'aide de flotteurs place. Consultez également cette solution de secours qui peuvent être d'aide css-tricks.com/forums/topic/flexbox-with-fallback
    Juste un point bien que, Bootstrap & Flexbox - en matière de soutien pour IE v4-alpha.getbootstrap.com/getting-started/flexbox

    OriginalL'auteur Karl Doyle

  4. 1

    Bootstrap 4 cartes sensibles

    J'ai essayé d'utiliser le <container>, <row> et <col> afin de répondre, mais vous perdez la

    Toutes les cartes ont la même hauteur

    fonction de la pioche de cartes, si vous le faites.
    Ce que vous avez besoin est le 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%;
  }
}

    Voici mon CodePen:
    Bootstrap 4 cartes sensibles

    OriginalL'auteur FrankieDoodie