Bootstrap 4 colonnes de table-cellule de table de carte sensible selon viewport?

Question

Donc dans Bootstrap v4, je vois qu'il y a une nouvelle fonctionnalité pour les jeux de cartes (http://v4-alpha.getbootstrap.com/components/card/#decks) qui fait un groupe de cartes, dont la hauteur est égale au contenu le plus élevé du groupe.

Il semble que le nombre de colonnes dépend du nombre de cartes-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 à grande largeur, 2 de large à moyenne largeur, et 1 à petite largeur?

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

Existe-t-il un moyen de faire en sorte que les cartes aient des nombres de colonnes différents en fonction de la fenêtre d'affichage en ne modifiant que le CSS?

Modifier - Vous cherchez de ne pas utiliser flex/FlexBox grâce au soutien IE

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

Answer 1

Ici, vous allez, 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*/ 
} 

Answer 2

Mise à jour 2018

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

J'ai trouvé plus facile de les rendre réactifs en utilisant les cartes à l'intérieur de la grille Bootstap col-* et vous pouvez ensuite utiliser les points d'arrêt de la grille 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

En outre, img-responsive a changé à img-fluid

Bootstrap 4.0.0

Flexbox est maintenant la valeur par défaut, mais il n'y a toujours pas un soutenu façon de faire la carte réactive -deck. La méthode recommandée est d'utiliser des cartes dans la grille:

Responsive cards using grid

Une autre façon de faire une carte-pont réactif, utilise divs sensible à la remise à zéro tous les x colonnes. Cela forcera les cartes à s'enrouler à des points d'arrêt spécifiques.

Par exemple: 5 sur XL, 4 sur LG, 3 sur MD, 2 sur SM, etc.

Responsive card deck demo (4.0.0)
Responsive card deck demo (alpha 6)
CSS pseudo elements variation

Answer 3

Cela peut être fait avec javascript.

• Tout d'abord, vous devez créer divs pour chaque point d'arrêt dans votre document html. Ensuite, vous devez affecter une valeur par défaut aux divs dans css. Ensuite, vous devez attribuer une valeur par défaut aux divs. Créer des requêtes média pour chaque point d'arrêt qui remplace cette valeur par défaut

• Ensuite, écrivez un peu de javascript. Une fonction pour tester les points d'arrêt en vérifiant si la valeur css par défaut que vous avez assignée a été remplacée, et une autre pour ajouter et supprimer les classes appropriées. J'ai supprimé les classes card-deck-wrapper et card-deck lorsque je voulais les rendre sensibles, et j'ai ajouté les classes col-**-** appropriées. Enfin, ajoutez des appels à ces fonctions dans les zones document.ready et window.resize.

var breakpoint; 
 

 
$(document).on('ready', function() { 
 
\t detectBreakpoint(); 
 
}); 
 

 
$(window).resize(function() { 
 
\t detectBreakpoint(); 
 
}); 
 

 
// detects the current breakpoint 
 
function detectBreakpoint() { 
 
\t if ($('.breakpointXS').css('display') == "inline") { 
 
\t \t breakpoint = 'xs'; 
 
\t } else if ($('.breakpointSM').css('display') == "inline") { 
 
\t \t breakpoint = 'sm'; 
 
\t } else if ($('.breakpointMD').css('display') == "inline") { 
 
\t \t breakpoint = 'md'; 
 
\t } else if ($('.breakpointLG').css('display') == "inline") { 
 
\t \t breakpoint = 'lg'; 
 
\t } 
 
\t placeCards(); 
 
} 
 

 
function placeCards() { 
 
\t if (breakpoint == 'xs' || breakpoint == 'sm') { 
 
\t \t console.log('small'); 
 
\t \t $('.cardCont1').removeClass('card-deck-wrapper'); 
 
\t \t $('.cardCont2').removeClass('card-deck'); 
 
\t \t $('.card').addClass('col-xs-10 offset-xs-1'); 
 
\t } else { 
 
\t \t $('.cardCont1').addClass('card-deck-wrapper'); 
 
\t \t $('.cardCont2').addClass('card-deck'); 
 
\t \t $('.card').removeClass('col-xs-10 offset-xs-1'); \t 
 
\t } 
 
}

.breakpointXS, .breakpointSM, .breakpointMD, .breakpointLG { 
 
\t /* hides divs to detect breakpoints until made visible my media queries */ 
 
\t display: none; 
 
} 
 

 
@media only screen and (max-width: 767px) { 
 
\t .breakpointXS { 
 
\t \t display: inline; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 991px) and (min-width: 768px) { 
 
\t .breakpointSM { 
 
\t \t display: inline; 
 
\t } 
 
} 
 

 
@media screen and (max-width: 1199px) and (min-width: 992px) { 
 
\t .breakpointMD { 
 
\t \t display: inline; 
 
\t } 
 
} 
 

 
@media only screen and (min-width: 1200px) { 
 
\t .breakpointLG { 
 
\t \t display: inline; 
 
\t } 
 
}

<!-- to use breakpoints in jquery --> 
 
\t \t <div class="breakpointXS"></div> 
 
\t \t <div class="breakpointSM"></div> 
 
\t \t <div class="breakpointMD"></div> 
 
\t \t <div class="breakpointLG"></div>