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

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?

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

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.

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 .

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

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";
[..]

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

Pour bootstrap 4, voici une image matricielle expliquant les classes utilisées pour afficher / masquer les éléments en fonction de la taille de l'écran:

Source: Meduim: Bootstrap 4 caché et visible

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'

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.

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>