Twitter bootstrap cacher élément sur de petits appareils
J'ai ce code:
<footer class="row">
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
</footer>
Quatre blocs avec certains textes à l'intérieur. Ils sont égaux en largeur, j'ai mis en col-sm-3
à chacun d'eux et ce que je veux faire est de cacher la dernière nav
sur le plus petit des appareils. J'ai essayé d'utiliser hidden-xs
sur que nav
et il le cache, mais en même temps je veux que les autres blocs à développer (changement de classe de col-sm-3
à col-sm-4
) col-sm-4 X 3 = 12
.
Toute solution?
Vous devez vous connecter pour publier un commentaire.
Sur petit appareil :
4 columns x 3 (= 12) ==> col-sm-3
Sur le plus petit :
3 columns x 4 (= 12) ==> col-xs-4
Comme vous le dites, hidden-xs n'est pas suffisant, vous devez combiner xs et sm classe.
Voici les liens vers la doc officielle sur disponible, réactif classes et sur la système de grille.
Ont dans la tête :
moyen [pas dans le lg xs ou sm])
XtraSmall)
hidden-sm-down
hidden-phone
Bootstrap 4
La affichage (caché/visible) classes sont modifiées dans le Bootstrap 4. Pour masquer sur le
xs
fenêtre d'affichage utilisation:d-none d-sm-block
Voir aussi: Manque visible** et caché-** dans le Bootstrap v4
Bootstrap 3 (réponse originale à cette question)
Utiliser le
hidden-xs
classe utilitaire..http://bootply.com/90722
Pour Bootstrap 4.0 il y a un changement
Voir les docs: https://getbootstrap.com/docs/4.0/utilities/display/
Afin de masquer le contenu sur le mobile et l'affichage sur les plus gros appareils, vous devez utiliser les classes suivantes:
La première classe à l'affichage aucun tous à travers les dispositifs et le second écran pour les appareils "sm" vers le haut (vous pouvez utiliser md, lg, etc. au lieu de sm si vous voulez montrer sur différents appareils.
Je conseille de lire à ce sujet avant la migration:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
Cela fonctionne aussi pour les éléments qui n'ont pas nécessairement utilisé dans une grille /petite colonne. Lorsqu'il est rendu sur les grands écrans de la police-taille plus petite que votre texte par défaut une taille de police.
Cette réponse répond à la question dans les OP le titre (qui est de savoir comment j'ai trouvé ce Q/A).