web-dev-qa-db-fra.com

Bootstrap les classes visibles et cachées ne fonctionnent pas correctement

J'ai essayé d'utiliser les classes Bootstrap visible et hidden pour créer du contenu visible uniquement sur mobile/desktop. J'ai remarqué que les classes ne fonctionnaient pas correctement (et j'ai remarqué que beaucoup de gens avaient ce problème et le résolvaient de cette façon), alors j'ai créé une feuille de style pour mobile afin de définir laquelle des divs afficherait sur mobile.

Ceci est mon code actuel:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

Désormais, le .mobile devrait être visible sur les écrans mobiles, d'une largeur de 900 pixels et plus. J'ai utilisé les classes Bootstrap pour l'autre div, .containerdiv, et cela fonctionne jusqu'à présent, mais uniquement lorsque j'ai ajouté une valeur pour hidden-xs dans ma propre feuille CSS mobile, comme ceci;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

Le .mobile div devrait maintenant apparaître sur les écrans 900px ou moins, mais ce n’est toujours pas le cas. Je ne sais pas pourquoi, display:block est la bonne chose à utiliser correctement? Ajouter visible-xs et visible-sm ne fait rien.

Quelle est la bonne façon de faire cela et pourquoi ma version ne fonctionne pas?

htmlcsstwitter-bootstrapresponsive-design
28
Jane

Votre .mobile div a les styles suivants:

.mobile {
    display: none !important;
    visibility: hidden !important;
}

Par conséquent, vous devez remplacer la propriété visibility par visible en plus de remplacer la propriété display par block. Ainsi:

.visible-sm {
    display: block !important;
    visibility: visible !important;
}
17
Graham Langdon

Aucune CSS requise, la classe visible devrait ressembler à ceci: visible-md-block pas seulement visible-md et le code devrait être comme ceci:

<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">

        </div>
    </div>
</div>

<div class="mobile hidden-md hidden-lg ">
    test
</div>

Extra css n'est pas nécessaire du tout.

7
Adarsh Gowda K R

Si vous donnez la propriété display table dans CSS, une classe cachée de bootstrap div n'aura pas d'effet sur cette div

1
simranjit

Votre classe de portable n'est pas correcte:

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
1
Jop

À partir d'aujourd'hui novembre 2017
Bootstrap v4 - beta 

Utilitaires réactifs

Toutes les variables @ screen ont été supprimées dans la version 4.0.0. Utilisez les mix Sass mixins média-breakpoint-up (), média-breakpoint-down () ou media-breakpoint-only (), ou la carte Sass $ grid-points d'arrêt grille.

Supprimé de la v3: .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline. invisible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg -inline-block

Supprimé de la v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden- lg-down

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

0
jriver27