web-dev-qa-db-fra.com

Les colonnes de table-cellule Bootstrap 4 deck de cartes sensibles en fonction de la fenêtre?

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

Il semble que le nombre de colonnes soit basé sur le nombre de card-div présentes dans le groupe. Existe-t-il un moyen de modifier le nombre de colonnes en fonction de la fenêtre d'affichage? Par exemple, 4 colonnes/carte de large en grande largeur, 2 de largeur moyenne et 1 de petite largeur?

Actuellement, ils ont le même nombre de colonnes/cartes jusqu'à moins de 544 pixels. À partir de 544 pixels, ils ont display: table-cell avec la règle screen (min-width: 544px).

Existe-t-il un moyen de modifier le nombre de colonnes des cartes en fonction de la fenêtre d'affichage en modifiant uniquement le code CSS?

Edit - Vous cherchez à ne pas utiliser flex/flexbox en raison de la prise en charge de IE

Exemple Codepen de 4 colonnes/carte et de 3 colonnes/carte à http://codepen.io/jpost-vlocity/full/PNEKKy/

csstwitter-bootstrapresponsive-designtwitter-bootstrap-4bootstrap-4
6
jpostdesign

Mise à jour 2018

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

J'ai trouvé plus facile de les rendre réactives en utilisant les cartes à l'intérieur de la grille Bootstap col-* et vous pouvez ensuite utiliser les points d'arrêt grid viewport. Activez la flexbox de Bootstrap si vous voulez que les cartes aient la même hauteur que le card-deck.

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

De plus, img-responsive a été remplacé par img-fluid

Bootstrap 4.0.0

Flexbox est maintenant la valeur par défaut , mais il n’existe toujours pas de méthode prise en charge pour créer un jeu de cartes réactif. La méthode recommandée consiste à utiliser des cartes dans la grille:

Cartes réactives utilisant la grille

Une autre façon de créer un jeu de cartes réactif consiste à utiliser des divs de réinitialisation réactives toutes les x colonnes. Cela forcera les cartes à se placer à des points d'arrêt spécifiques.

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

Démo du jeu de cartes responsive ( 4.0.0 )
Démo du jeu de cartes responsive (alpha 6)
Variation de pseudo-éléments CSS

7
Zim

Voilà. http://codepen.io/KarlDoyle/pen/pypWbR

L'essentiel est que vous deviez remplacer 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*/
}
5
Karl Doyle

J'ai trouvé une solution de contournement assez facile avec css-grid. Vous pouvez modifier le 250px pour l'adapter à votre cas d'utilisation.

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
5
esitarz

Bootstrap 4 deck de cartes responsive

J'ai essayé d'utiliser les <container>, <row> et <col> pour le rendre réactif, mais vous perdez le 

Toutes les cartes ont la même hauteur

fonction du jeu de cartes, si vous faites cela. Ce dont vous avez besoin est 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 deck deck responsive

0
FrankieDoodie