Manquant visible – ** et caché – ** dans Bootstrap v4

Dans Bootstrap v3, j’utilise souvent les classes cachées – ** combinées à clearfix pour contrôler les dispositions de plusieurs colonnes à différentes largeurs d’écran. Par exemple,

Je pourrais combiner plusieurs masqués – ** dans un DIV pour que mes colonnes multiples apparaissent correctement à différentes largeurs d’écran.

Par exemple, si je voulais afficher des lignes de photos de produits, 4 par ligne sur des écrans plus grands, 3 sur des écrans plus petits, puis 2 sur de très petits écrans. Les photos du produit peuvent avoir des hauteurs différentes. J’ai donc besoin du correctif pour que la ligne se brise correctement.

Voici un exemple en v3 …

Maintenant que v4 a supprimé ces classes et les a remplacées par les classes visibles / cachées – ** – up / down, il semble que je doive faire la même chose avec plusieurs DIV à la place.

Voici un exemple similaire en v4 …

Je suis donc passé de simples DIV à devoir append plusieurs DIV avec beaucoup de classes haut / bas pour obtenir la même chose.

De…

à…

 

Y a-t-il une meilleure façon de le faire dans la version 4 que j’ai négligée?

    Mise à jour pour Bootstrap 4 (2018)

    Les hidden-* et visible-* n’existent plus dans Bootstrap 4. Si vous souhaitez masquer un élément sur des niveaux ou des points d’arrêt spécifiques dans Bootstrap 4, utilisez les classes d’affichage d-* conséquence.

    Rappelez-vous qu’extra-small / mobile (anciennement xs ) est le point d’arrêt par défaut (implicite), à ​​moins qu’il ne soit remplacé par un point d’arrêt plus grand . Par conséquent, l’infixe -xs n’existe plus dans Bootstrap 4 .

    Afficher / masquer pour le point d’ arrêt et le bas :

    • hidden-xs-down (hidden-xs) = d-none d-sm-block
    • hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
    • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
    • hidden-lg-down = d-none d-xl-block
    • hidden-xl-down (so 3.x) = d-none (identique à hidden )

    Afficher / masquer pour le point d’ arrêt et en hausse :

    • hidden-xs-up = d-none (identique à hidden )
    • hidden-sm-up = d-sm-none
    • hidden-md-up = d-md-none
    • hidden-lg-up = d-lg-none
    • hidden-xl-up (n / a 3.x) = d-xl-none

    Afficher / masquer uniquement pour un seul point d’arrêt :

    • hidden-xs (only) = d-none d-sm-block (identique à hidden-xs-down )
    • hidden-sm (seulement) = d-block d-sm-none d-md-block
    • hidden-md (seulement) = d-block d-md-none d-lg-block
    • hidden-lg (seulement) = d-block d-lg-none d-xl-block
    • hidden-xl (n / a 3.x) = d-block d-xl-none
    • visible-xs (seulement) = d-block d-sm-none
    • visible-sm (seulement) = d-none d-sm-block d-md-none
    • visible-md (seulement) = d-none d-md-block d-lg-none
    • visible-lg (seulement) = d-none d-lg-block d-xl-none
    • visible-xl (n / a 3.x) = d-none d-xl-block

    Démonstration des classes d’affichage responsive dans Bootstrap 4

    Notez également que d-*-block peut être remplacé par d-*-inline , d-*-flex , d-*-table-cell , d-*-table etc. en fonction du type d’affichage de l’élément. En savoir plus sur les classes d’affichage

    Malheureusement, toutes les classes hidden-*-up et hidden-*-down ont été supprimées de Bootstrap (à partir de Bootstrap Version 4 Beta , dans la version 4 Alpha et la version 3, ces classes existaient toujours).

    Au lieu de cela, de nouvelles classes d-* devraient être utilisées, comme mentionné ici: https://getbootstrap.com/docs/4.0/migration/#utilities

    J’ai découvert que la nouvelle approche est moins utile dans certaines circonstances. L’ancienne approche consistait à cacher des éléments alors que la nouvelle approche consistait à AFFICHER des éléments. L’affichage d’éléments n’est pas si simple avec CSS, car vous devez savoir si l’élément est affiché sous forme de bloc, de ligne, de bloc, de tableau, etc.

    Vous voudrez peut-être restaurer les anciens styles “hidden- *” connus de Bootsrap 3 avec ce CSS:

     /*\ * Restore Bootstrap 3 "hidden" utility classes. \*/ /* Breakpoint XS */ @media (max-width: 575px) { .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl { display: none !important; } } /* Breakpoint SM */ @media (min-width: 576px) and (max-width: 767px) { .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl { display: none !important; } } /* Breakpoint MD */ @media (min-width: 768px) and (max-width: 991px) { .hidden-md-down, .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl { display: none !important; } } /* Breakpoint LG */ @media (min-width: 992px) and (max-width: 1199px) { .hidden-lg-down, .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl { display: none !important; } } /* Breakpoint XL */ @media (min-width: 1200px) { .hidden-xl-down, .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg { display: none !important; } } 

    Les classes hidden-unless-* n’étaient pas incluses dans Bootstrap 3, mais elles sont également utiles et devraient être explicites.

    http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

    Vous devez maintenant définir la taille de ce qui est caché comme tel

     .hidden-xs-down 

    Va cacher quelque chose de xs et plus petit, seulement xs

     .hidden-xs-up 

    Va tout cacher

    Bootstrap v4.1 utilise de nouveaux noms de classe pour masquer les colonnes sur leur système de grid.

    Pour masquer les colonnes en fonction de la largeur de l’écran, utilisez la classe d-none ou l’une des classes d-{sm,md,lg,xl}-none . Pour afficher des colonnes sur certaines tailles d’écran, combinez les classes mentionnées ci-dessus avec les classes de d-block ou d-{sm,md,lg,xl}-block .

    Les exemples sont:

     
    hide on screens wider than lg
    hide on screens smaller than lg

    Je ne m’attends pas à ce que plusieurs div soient une bonne solution.

    Je pense également que vous pouvez remplacer .visible-sm-block par .hidden-xs-down et .hidden-md-up (ou .hidden-sm-down et .hidden-lg-up pour agir sur les mêmes requêtes de média).

    hidden-sm-up en:

     .visible-sm-block { display: none !important; } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-block { display: block !important; } } 

    .hidden-sm-down et .hidden-lg-up comstack en:

     @media (max-width: 768px) { .hidden-xs-down { display: none !important; } } @media (min-width: 991px) { .hidden-lg-up { display: none !important; } } 

    Les deux situations devraient agir de la même manière.

    Votre situation devient différente lorsque vous essayez de remplacer .visible-sm-block et .visible-lg-block . Les documents Bootstrap v4 vous indiquent:

    Ces classes ne tentent pas de prendre en charge des cas moins courants où la visibilité d’un élément ne peut pas être exprimée sous la forme d’une seule plage contiguë de tailles de point d’arrêt de fenêtre d’affichage. vous devrez plutôt utiliser des CSS personnalisés dans de tels cas.

     .visible-sm-and-lg { display: none !important; } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-and-lg { display: block !important; } } @media (min-width: 1200px) { .visible-sm-and-lg { display: block !important; } } 

    L’utilisateur Klaro a suggéré de restaurer les anciennes classes de visibilité, ce qui est une bonne idée. Malheureusement, leur solution n’a pas fonctionné dans mon projet.

    Je pense que c’est une meilleure idée de restaurer l’ancien mixin de bootstrap, car il couvre tous les points d’arrêt qui peuvent être définis individuellement par l’utilisateur.

    Voici le code:

     // Restore Bootstrap 3 "hidden" utility classes. @each $bp in map-keys($grid-breakpoints) { .hidden-#{$bp}-up { @include media-breakpoint-up($bp) { display: none !important; } } .hidden-#{$bp}-down { @include media-breakpoint-down($bp) { display: none !important; } } .hidden-#{$bp}-only{ @include media-breakpoint-only($bp){ display:none !important; } } } 

    Dans mon cas, j’ai inséré cette partie dans un fichier _custom.scss qui est inclus à ce stade dans le fichier bootstrap.scss :

     /*! * Bootstrap v4.0.0-beta (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @import "functions"; @import "variables"; @import "mixins"; @import "custom"; // < -- my custom file for overwriting default vars and adding the snippet from above @import "print"; @import "reboot"; [..] 

    Malheureusement, ces nouvelles classes bootstrap 4 ne fonctionnent pas comme les anciennes sur une div en utilisant la fonction de collapse car elles définissent le div visible en block qui est visible plutôt que caché et si vous ajoutez un div supplémentaire, la fonctionnalité de collapse ne fonctionne plus.