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

96

Avoir un problème avec les nouvelles classes masquées / visibles des utilitaires réactifs lors de la migration vers Bootstrap 4 . Je sais que les classes .hidden- ont été supprimées de la v3 et remplacées par .hidden-*-up .hidden-*-down. Utilisation des nouvelles .hidden-*-up.hidden-*-downclasses mais les éléments ne deviennent pas visibles / masqués. Je ne comprends pas 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-bootstrap twitter-bootstrap-3 hide hidden twitter-bootstrap-4 Yatko
la source
2
Et votre question est quoi? stackoverflow.com/help/how-to-ask
Rob
@Rob fair;) changé.
Yatko
Vous devez poster un exemple minimal du balisage à l'origine du problème: exemple minimal reproductible Nous n'avons aucune idée de ce que sont "les éléments".
Rob
Configurez un codepen contenant Bootstrap 4 et votre exemple HTML: codepen.io/esr360/pen/prWjYv . Votre affirmation selon laquelle "rien n'est caché dans cet exemple, quelle que soit la taille de l'écran" est incorrecte.
ESR
@EdmundReed oui, cela me rend fou: j'ai essayé avec un exemple simple, fonctionne sur mon mac, cesse de fonctionner juste après la synchronisation ... j'ai essayé le cache, même un autre FAI pour exclure toute mise en cache
Yatko

Réponses:

227

Avec Bootstrap 4, les .hidden-* classes ont été complètement supprimées (oui, elles ont été remplacées par hidden-*-*mais ces classes ont également disparu des alphas v4).

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

visible- * a également été supprimé ; au lieu d'utiliser des .visible-*classes explicites , rendez l'élément visible en ne le cachant pas (encore une fois, 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 d' 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>

Documentation

Yatko
la source
1
La raison pour laquelle je n'ai pas pu trouver cela, la version bêta de la v4 a été publiée il y a quelques jours et tous les résultats indexés par Google vous amènent toujours à la v4-alpha, d'une manière ou d'une autre, j'ai obtenu le nouveau lien CDN mais tout le reste était toujours -alpha
Yatko
2
Je suppose que "d" = display.
user20232359723568423357842364
16
pourquoi introduiraient-ils un changement aussi peu intuitif et révolutionnaire? une explication?
szaman
3
@rrrafalsz Je me suis posé la même question. Cela semble être un pas inutilement compliqué en arrière par rapport au précédent "visible-sm-up / down" qu'ils avaient en alpha. Il serait intéressant d'en connaître la raison.
Katai
Pourriez-vous commenter clairement dans votre exemple, laquelle des DIV sera visible et laquelle ne le sera pas? Cela m'a pris un certain temps, et je ne suis pas sûr, si je le commente, si ce serait juste. merci
helle
51

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 xl .d-xl-none

  7. Visible sur tous les blocs .d

  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

4.5 lien: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

Vinod Chauhan
la source
1
Bien que cela puisse théoriquement répondre à la question, il serait préférable d'inclure ici les parties essentielles de la réponse et de fournir le lien pour référence.
Rick
6

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

jross
la source
2
Je vous remercie. Bootstrap pourrait supprimer l'ancien contenu au moins pour l'archiver afin que les noobs (comme moi) n'aient pas à passer par 123523532 solutions possibles avant de trouver cette réponse à la pile. Depuis quelques années, le débordement de pile est plus utile que Google, donc quand les gens disent utiliser google ... je dis non, utilisez stack .. Plus rapide et plus utile.
Bleu
0

Certaines versions fonctionnent

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Isa illimité
la source