web-dev-qa-db-fra.com

Manquant visible - ** et masqué - ** dans Bootstrap _ v4

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

Je pouvais combiner plusieurs éléments cachés - ** dans un DIV pour que mes colonnes multiples apparaissent correctement à différentes largeurs d’écran.

Par exemple, si je voulais afficher des rangées de photos de produits, 4 par rangée sur des écrans de grande taille, 3 sur des écrans plus petits, puis 2 sur de très petits écrans. Les photos de produit peuvent être de différentes hauteurs. J'ai donc besoin de clearfix pour 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 - ** - haut/bas, il semble que je doive faire la même chose avec plusieurs DIV.

Voici un exemple similaire en v4 ...

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

Je suis donc passé de DIV uniques à la nécessité d'ajouter plusieurs DIV avec beaucoup de classes up/down pour obtenir 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?

twitter-bootstrapbootstrap-4
226
johna

Mise à jour pour Bootstrap 4 (2018)

Les classes _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-*_ en conséquence.

N'oubliez pas que très petit/mobile (anciennement xs) est le point d'arrêt implicite (implicite), sauf s'il est remplacé par un point d'arrêt plus grand . Par conséquent, , le _-xs_ infixe n'existe plus dans Bootstrap 4 .

Afficher/masquer pour points 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 point d'arrêt et suivant :

  • _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_ (seulement) = _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émo des classes d'affichage sensibles dans Bootstrap 4

De plus, notez 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 le classes d'affichage

615
Zim

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

Au lieu de cela, les nouvelles classes d-* devraient être utilisées, comme indiqué 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 LES ÉLÉMENTS, tandis que la nouvelle approche consistait à AFFICHER é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 doivent être explicites.

30
Klaro

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

Pour masquer des 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 susmentionnées avec les classes d-block ou d-{sm,md,lg,xl}-block.

Les exemples sont:

<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 de ces ici .

16
Sandy Brutas

Je ne m'attends pas à ce que la division multiple soit une bonne solution.

Je pense aussi 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 support).

hidden-sm-up est compilé 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 sont compilés 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. Bootstrap Les documents v4 vous disent:

Ces classes ne tentent pas de prendre en charge les 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 points d’arrêt de vues; 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;
  }
}
4
Bass Jobsen

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 pouvant ê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 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";
[..]
3
Michael Walter

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

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

.hidden-xs-down

Cachera rien de xs et plus petit, seulement xs

.hidden-xs-up

Va tout cacher

3
Kyle Selman

Malheureusement, ces nouvelles classes bootstrap 4 ne fonctionnent pas comme les anciennes classes sur un div utilisant collapse car elles affectent le div visible à block, ce qui débute de manière visible plutôt que masqué. Si vous ajoutez un div supplémentaire à la fonctionnalité collapse ne fonctionne plus.

0
Scotty G

Bootstrap 4 pour masquer tout le contenu, utilisez cette classe '. D-none' elle sera tout masquée, quels que soient les points d’arrêt identiques à la précédente bootstrap version classe '. Hidden "

0
Lasantha