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)

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

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>

codepen.io/_yatko/pen/ZJXQxy

Documentation

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

-

Caché sur tous les .d-none
Caché uniquement sur xs .d-none .d-sm-block
Caché uniquement sur sm .d-sm-none .d-md-block
Caché uniquement sur md .d-md-none .d-lg-block
Caché uniquement sur lg .d-lg-none .d-xl-block
Caché uniquement sur xl .d-xl-none
Visible sur tous les blocs .d
Visible uniquement sur xs .d-block .d-sm-none
Visible uniquement sur sm .d-none .d-sm-block .d-md-none
Visible uniquement sur md .d-none .d-md-block .d-lg-none
Visible uniquement sur lg .d-none .d-lg-block .d-xl-none
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
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
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é
source