Élément de cache Twitter bootstrap sur les petits appareils

J’ai ce code:

Quatre blocs avec des textes à l’intérieur Ils sont égaux en largeur, j’ai mis col-sm-3 à tous et ce que je veux faire est de cacher la dernière nav sur des petits appareils supplémentaires. J’ai essayé d’utiliser hidden-xs sur ce nav et ça le cache, mais en même temps je veux que les autres blocs se développent (changez de classe de col-sm-3 à col-sm-4 ) col-sm-4 X 3 = 12 .

Toute solution?

Sur petit appareil: 4 columns x 3 (= 12) ==> col-sm-3

Sur extra-petit: 3 columns x 4 (= 12) ==> col-xs-4

  

Comme vous le dites, hidden-xs ne suffit pas, vous devez combiner les classes xs et sm.


Voici des liens vers le document officiel sur les classes réactives disponibles et sur le système de grid .

Avoir en tête:

  • 1 rang = 12 cols
  • Pour le périphérique X tra S : col-xs -__
  • Pour SM tous les périphériques : col-sm -__
  • Pour le périphérique de mémoire : col-md -__
  • Pour l’appareil photo : col-lg -__
  • Rendre visible uniquement (caché sur d’autres): visible-md (visible uniquement dans le support [pas dans lg xs ou sm])
  • Cacher uniquement (visible sur les autres): hidden-xs (juste caché dans XtraSmall)

Bootstrap 4

Les classes d’affichage (caché / visible) sont modifiées dans Bootstrap 4. Pour masquer dans la fenêtre d’ affichage de xs utilisez:

d-none d-sm-block

Voir aussi: Manquant visible – ** et caché – ** dans Bootstrap v4


Bootstrap 3 (réponse originale)

Utilisez la classe d’utilitaire hidden-xs .

  

http://bootply.com/90722

Pour Bootstrap 4.0, il y a un changement

Voir les documents: https://getbootstrap.com/docs/4.0/utilities/display/

Pour masquer le contenu sur le mobile et l’afficher sur les plus gros appareils, vous devez utiliser les classes suivantes:

 d-none d-sm-block 

Le premier ensemble de classes n’affiche aucun sur tous les périphériques et le second l’affiche pour les périphériques “sm” (vous pouvez utiliser md, lg, etc. au lieu de sm si vous souhaitez afficher sur différents périphériques.

Je suggère de lire à ce sujet avant la migration:

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

  

Cela fonctionne également pour les éléments pas nécessairement utilisés dans une grid / petite colonne. Lorsqu’elle est rendue sur des écrans plus grands, la taille de la police sera inférieure à la taille de la police par défaut.

Cette réponse répond à la question du titre OP (c’est comme ça que j’ai trouvé cette question).