web-dev-qa-db-fra.com

bootstrap 4 utilitaires sensibles visibles / cachés xs sm lg ne fonctionne pas

Avoir un problème avec les nouveaux utilitaires responsive classes cachées/visibles lors de la migration vers Bootstrap 4 . Je suis conscient que les classes .hidden ont été retirées de la v3 et remplacées avec .hidden-*-up.hidden-*-down. Utilisation des nouvelles classes .hidden-*-up.hidden-*-down mais les éléments ne deviennent pas visibles/cachés. Je ne peux 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)

twitter-bootstraptwitter-bootstrap-3hidehiddentwitter-bootstrap-4
73
Yatko

Avec Bootstrap 4 .hidden-*, les classes ont été complètement supprimées (oui, elles ont été remplacées par hidden-*-* mais les classes sont également parties de v4 alphas). À partir de la version bêta-bêta, vous pouvez combiner les classes .d-*-none et .d-*-block pour obtenir le même résultat. visible- * a également été supprimé ; au lieu d'utiliser des classes .visible-* _ explicites, rendez l'élément visible en ne le masquant pas (utilisez à nouveau 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-aucun d-sm-inline-block) ...

Un exemple de Bootstrap 4 utilitaires sensibles :

<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>
194
Yatko

**** Classe de taille d'écran ****

-

  1. Caché sur tous .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 xl .d-xl-none

  7. visible sur tous .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 xl .d-none .d-xl-block

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

29
Vinod Chauhan

Bootstrap 4 (^ beta) a modifié les classes pour les éléments de masquage/affichage réactifs. Voir ce lien pour les classes appropriées à utiliser: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

6
jross

Une version fonctionne

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