bootstrap 4 responsive utilities visible / hidden xs sm lg ne fonctionne pas

Question

J'ai un problème avec les nouveaux utilitaires réactifs. classes cachées / visibles lors de la migration vers Bootstrap 4 . Je suis conscient que les classes .hidden ont été supprimé de la v3 et remplacé avec .hidden-*-up .hidden-*-down . En utilisant le nouveau .hidden-*-up.hidden-*-down mais les éléments ne passent pas en mode visible/caché. Je n'arrive pas à comprendre pourquoi.

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

* rien n'est caché dans cet exemple, quelle que soit la taille de l'écran (Safari, Responsive Design Mode)

Answer 1

Avec Bootstrap 4 .hidden-* les classes ont été complètement supprimées (oui, ils ont été remplacés par hidden-*-* mais ces classes ont également disparu de la v4 alpha).

À partir de la v4-beta, vous pouvez combiner .d-*-none et .d-*-block pour obtenir le même résultat.

visible-* a été supprimé également ; au lieu d'utiliser des .visible-* rendez l'élément visible en ne le masquant pas (là encore, utilisez des combinaisons de .d-none .d-md-block). Voici l'exemple de travail :

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs" devient class="d-none d-sm-block" (ou d-none d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Un exemple de Utilitaires réactifs Bootstrap 4 :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall 576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium 768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe 992px </div>
<div class="d-none d-xl-block"> eXtra Large 1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

• codepen.io/_yatko/pen/ZJXQxy

Documentation

Answer 2

Classe de taille d'écran

-

1. Caché sur tous les .d-none

2. Caché uniquement sur xs .d-none .d-sm-block

3. Caché uniquement sur sm .d-sm-none .d-md-block

4. Caché uniquement sur md .d-md-none .d-lg-block

5. Caché uniquement sur lg .d-lg-none .d-xl-block

6. Caché uniquement sur le xl .d-xl-none

7. Visible sur tous les .d-block

8. Visible uniquement sur xs .d-block .d-sm-none

9. Visible uniquement sur sm .d-none .d-sm-block .d-md-none

10. Visible uniquement sur md .d-none .d-md-block .d-lg-none

11. Visible uniquement sur lg .d-none .d-lg-block .d-xl-none

12. Visible uniquement sur le xl .d-none .d-xl-block

Consultez ce lien http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4,5 liens : https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

Answer 3

Bootstrap 4 (^beta) a modifié les classes pour les éléments réactifs cachés/affichés. Voir ce lien pour les classes correctes à utiliser : http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Answer 4

Bootstrap v5.0 +

<div class="d-xs-block d-sm-none">xs <576px</div>
<div class="d-none d-sm-block d-md-none">sm 576px</div>
<div class="d-none d-md-block d-lg-none">md 768px</div>
<div class="d-none d-lg-block d-xl-none">lg 992px</div>
<div class="d-none d-xl-block d-xxl-none">xl 1200px</div>
<div class="d-none d-xxl-block">xxl 1400px</div>

* nouveau Extra extra large xxl 1400px point de rupture

Answer 5

Certaines versions fonctionnent

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>