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

j'ai essayé d'utiliser le Bootstrap visible et hidden classes pour créer du contenu seulement visible sur mobile / bureau. J'ai remarqué que les classes ne fonctionnaient pas correctement (et j'ai remarqué que beaucoup de gens avaient ce problème et l'ont résolu de cette façon) donc j'ai créé une feuille de style mobile pour définir laquelle des divs à montrer 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>

.mobile doit être visible sur les écrans mobiles, largeur 900px, et plus petit. J'ai utilisé le Bootstrap classes pour l'autre div,.containerdiv, et qui fonctionne jusqu'à présent, mais seulement quand j'ai ajouté une valeur de hidden-xs dans mon propre mobile feuille CSS, comme ceci;

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

.mobile div devrait maintenant apparaître sur les écrans 900px ou plus petit mais il ne le fait toujours pas. Je ne sais pas pourquoi,display:block est la bonne chose à utiliser? L'ajout d' visible-xs et visible-sm ne fait rien.

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

27
demandé sur Mogsdad 2013-12-03 19:19:21

5 réponses

.mobile div a les styles suivants:

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

par conséquent, vous devez Outrepasser le visibility propriété visible en plus de dépasser le display propriété block. Comme ceci:

.visible-sm {
    display: block !important;
    visibility: visible !important;
}
16
répondu Graham Langdon 2016-06-15 16:05:09

Pas de CSS nécessaire, visible de classe comme ceci: visible-md-block pas visible-md et le code devrait ressembler à 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>

CSS supplémentaire n'est pas nécessaire du tout.

7
répondu Adarsh Gowda K R 2016-06-15 16:14:56

Votre classe mobile N'est pas correct:

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
1
répondu Jop 2013-12-03 15:32:39

si vous donnez la propriété display table dans css un certain div bootstrap hidden class n'aura pas d'effet sur ce div

1
répondu simranjit 2015-11-20 13:54:05

Comme d'aujourd'hui, novembre 2017

Bootstrap v4-beta

Responsive utilitaires

toutes les variables @screen ont été supprimées dans v4.0.0. Utiliser les médias-point d'arrêt(), les médias-point d'arrêt(), ou des médias-point d'arrêt() mixin Sass ou l' $grille-points d'arrêt Sass carte à la place.

supprimé de v3:.hidden-xs .caché-sm .caché-md .caché-lg .visible-xs-bloc .visible-xs-inline .visible-xs-inline-block .visible-sm-bloc .visible-sm-inline .visible-sm-inline-block .visible-md-bloc .visible-md-inline .visible-md-inline-block .bloc-lg-visible .visible-lg-inline .visible-LG-inline-block

supprimé de v4 alphas:.hidden-xs-up .caché-xs-vers le bas .caché-sm-up .caché-sm-bas .caché-md-up .caché-md-bas .caché-lg-up .caché-lg-bas

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

0
répondu jriver27 2017-11-22 18:12:28