web-dev-qa-db-fra.com

Bootstrap 4 La classe "cachée" ne fonctionne pas

J'utilise Bootstrap v4 avec ses CSS et JS par défaut. J'essaie d'appliquer les classes hidden, hidden-XX-down et hidden-XX-up à divers divs, boutons, etc. Mais cela ne semble rien affecter. Toutes les autres classes fonctionnent, sauf celle-ci.

Voici un exemple:

<div class="row">

  <div class="col col-10 offset-1 hidden-sm-down">

    <p class="text-primary text-center">Lorem ipsum dolor sit amet.</p>

  </div>

</div>

Je veux que le paragraphe soit invisible lorsque je redimensionne la fenêtre à une plus petite largeur (sm-down), mais il reste visible et rien ne se passe.

csshtmltwitter-bootstrapbootstrap-4
7
user9179774

Utilisation d-none, d-sm-none, d-md-none etc.

https://getbootstrap.com/docs/4.0/utilities/display/

Pour afficher uniquement pour md up (masquer pour sm down), utilisez:

<div class="d-none d-md-block"></div>
10
hayden

Eh bien, l'utilisation de la propriété display a définitivement résolu le problème.

Au cas où quelqu'un se demanderait pourquoi les classes hidden ne fonctionnaient pas, c'est très simple ... Elles n'existent plus dans la version 4 de Bootstrap. C'est ce que vous obtenez en regardant d'anciennes vidéos de didacticiel.

2
user9179774

Dans Bootstrap 4, la classe invisible a pris la place de la classe cachée.

0
Kelly

Si vous avez déjà du code avec la classe cachée, je recommande d'en créer un:

.hidden{ 
    display: none;
}

À votre santé

0
Chatoxz