Visible manquant - ** et caché - ** dans Bootstrap v4


291

Dans Bootstrap v3, j'utilise souvent les classes cachées - ** combinées avec clearfix pour contrôler les dispositions multi-colonnes à différentes largeurs d'écran. Par exemple,

Je pourrais combiner plusieurs caché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 clearfix pour garantir que la ligne se casse correctement.

Voici un exemple en v3 ...

http://jsbin.com/tosebayode/edit?html,css,output

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

Voici un exemple similaire en v4 ...

http://jsbin.com/sagowihowa/edit?html,css,output

Je suis donc passé de DIVs simples à devoir ajouter plusieurs DIVs avec beaucoup de classes up / down pour réaliser la même chose.

De...

<div class="clearfix visible-xs-block visible-sm-block"></div>

à...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

Y a-t-il une meilleure façon de faire cela dans la v4 que j'ai ignorée?

Réponses:


782

Mise à jour pour Bootstrap 4 (2018)

Les classes hidden-*et 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 en conséquence.visible-*d-*

N'oubliez pas que extra-small / mobile (anciennement xs) est le point d'arrêt par défaut (implicite), sauf s'il est remplacé par un point d'arrêt plus grand . Par conséquent, l' -xsinfixe n'existe plus dans Bootstrap 4 .

Afficher / masquer pour le point d' arrêt et vers 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(n / a 3.x) = d-none(identique à hidden)

Afficher / masquer pour le point d' arrêt et plus :

  • 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(uniquement) = d-none d-sm-block(identique à hidden-xs-down)
  • hidden-sm (uniquement) = d-block d-sm-none d-md-block
  • hidden-md (uniquement) = d-block d-md-none d-lg-block
  • hidden-lg (uniquement) = d-block d-lg-none d-xl-block
  • hidden-xl (n / a 3.x) = d-block d-xl-none
  • visible-xs (uniquement) = d-block d-sm-none
  • visible-sm (uniquement) = d-none d-sm-block d-md-none
  • visible-md (uniquement) = d-none d-md-block d-lg-none
  • visible-lg (uniquement) = d-none d-lg-block d-xl-none
  • visible-xl (n / a 3.x) = d-none d-xl-block

Démo des classes d'affichage réactives dans Bootstrap 4

, Également noter que d-*-blockpeut être remplacé par d-*-inline, d-*-flex, d-*-table-cell, d-*-tableetc .. en fonction du type d'affichage de l'élément. En savoir plus sur les classes d'affichage


1
J'ai repéré ce changement lors de la sortie de la version bêta et je pense que c'est beaucoup mieux que ce qu'il était dans les versions alpha. Merci d'avoir ajouté la réponse - je marquerai comme la solution.
johna

22
@johna c'est pire - cependant. Il n'y a pas d-initialdonc vous ne pouvez plus remplacer le d-<breakpoint>-hiddenet le définir à sa valeur initiale. Si je veux masquer un élément sur des écrans plus petits tout en le montrant sur des écrans moyens et plus grands sans connaître l'affichage initial (qui pourrait être dynamique), je ne peux pas restaurer sa valeur. Ils n'ont pensé à rien de tout cela.
Yates

11
La pire mise à jour jamais. Comment passe-t-on d'un concept «parlant» super intuitif à quelque chose d'aussi cryptique? Ouvrir un problème pour cela. Ils auraient pu au moins laisser les anciennes classes coexister.
Andreas

4
Je suis en fait surpris de la difficulté de trouver cette réponse.
Anthony

2
@Andreas Je suis entièrement d'accord, c'est un mauvais design à mon avis
Anthony

35

Malheureusement , toutes les classes hidden-*-upet hidden-*-downont été retirés Bootstrap ( à partir de Bootstrap Version 4 Beta , dans la version 4 Alpha et la version 3 de ces classes existaient encore).

Au lieu de cela, de nouvelles classes d-*doivent ê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 était de masquer les éléments tandis que la nouvelle approche était de montrer les éléments. Afficher des éléments n'est pas si simple avec CSS car vous devez savoir si l'élément est affiché sous forme de bloc, en ligne, bloc en ligne, tableau, etc.

Vous voudrez peut-être restaurer les anciens styles "hidden- *" connus de Bootstrap 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.


Est-ce que cela fonctionne toujours avec la version actuelle de B4? Ce problème de visibilité est l'une des principales raisons pour lesquelles je n'ai pas pris la peine de bouger. Je m'embrouille parfois lors de la programmation et cela me faisait juste la tête. (J'ai 64 ans alors donnez-moi une pause!) Aussi (ne voulez pas être effronté) mais avez-vous un équivalent pour visible? V utile d'avoir à la fois IMHO (ou la façon dont je code de toute façon :-)) ATB Steve
BeNice

24

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

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

Voici des exemples:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Plus ici .


4

Je ne m'attends pas à ce que plusieurs div soit une bonne solution.

Je pense également que vous pouvez remplacer .visible-sm-blockpar .hidden-xs-downet .hidden-md-up(ou .hidden-sm-downet .hidden-lg-uppour agir sur les mêmes requêtes multimédias).

hidden-sm-up se compile en:

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

.hidden-sm-downet .hidden-lg-upcompile 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-blocket .visible-lg-block. Les documents Bootstrap v4 vous disent:

Ces classes n'essaient pas de prendre en compte des cas moins courants où la visibilité d'un élément ne peut pas être exprimée comme une plage contiguë unique de tailles de point d'arrêt de fenêtre; dans ce cas, vous devrez utiliser du CSS personnalisé.

.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;
  }
}

4

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 _custom.scssfichier qui est inclus à ce stade dans le 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";
[..]

1
Très utile! La méthode Bootstrap 4 semble être un peu une énigme, en plus d'ajouter des display: blockruptures de flux dans certains scénarios.
Luke

3

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

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

.hidden-xs-down

Cachera tout ce qui est xs et plus petit, seulement xs

.hidden-xs-up

Va tout cacher


Oui, je les ai utilisés dans mon exemple v4, mais le problème est que j'ai maintenant besoin de plusieurs DIVs où en v3 je pourrais en faire un ...
johna

6
Cette solution est obsolète et n'est valable que pour Bootstrap V4 Alpha, pour Bêta et après, malheureusement celles-ci doivent être remplacées comme spécifié dans les ocmments ci-dessus
Marc Magon


1

Bootstrap 4 pour masquer tout le contenu, utilisez cette classe '.d-none', ce sera tout masquer indépendamment des points d'arrêt, comme la classe de version de bootstrap précédente '.hidden'


0

Malheureusement, ces nouvelles classes bootstrap 4 ne fonctionnent pas comme les anciennes sur un div en utilisant collapsecar elles définissent le div visible sur blocklequel commence visible plutôt que caché et si vous ajoutez un div supplémentaire autour de la collapsefonctionnalité ne fonctionne plus.


0
i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.