Cacher des éléments dans une mise en page réactive ?

En regardant dans bootstrap, il semble qu'ils prennent en charge la réduction des éléments de la barre de menu pour les écrans plus petits. Existe-t-il quelque chose de similaire pour les autres éléments de la page ?

Par exemple, j'ai un

avec des nav-pills flottant à droite. Sur un petit écran, cela pose des problèmes. J&#8217aimerais au moins l&#8217intégrer dans une liste déroulante similaire permettant de cliquer pour en montrer davantage.

Est-ce possible dans le cadre existant de Bootstrap ?

Marc Uberstein
Question modifiée 24 janvier 2014 в 12:23
Programmation
html css responsive-design twitter-bootstrap
8 janvier 2013 в 1:50
Aucun avis pour le moment

De nouvelles classes visibles ajoutées à Bootstrap

Très petits appareils Téléphones (

Yuval Pruss
Réponse modifiée 5 janvier 2018 в 11:02
Commentaires (6)

Vous pouvez saisir ces suffixes de classe de module pour tout module afin de mieux contrôler l'endroit où il sera affiché ou masqué.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop

http://twitter.github.com/bootstrap/scaffolding.html scroll to bottom

Marcin Orlowski
Réponse modifiée 15 juin 2017 в 5:28
Commentaires (5)

J'ai quelques clarifications à ajouter ici :

  1. La liste affichée (visible-phone, visible-tablet, etc.) est dépréciée dans Bootstrap 3. Les nouvelles valeurs sont :
  • visible-xs-*
  • visible-sm-*
  • visible-md-*
  • visible-lg-*
  • caché-xs-*
  • caché-sm-*
  • caché-md-*
  • caché-lg-*

L'astérisque se traduit par ce qui suit pour chacun (je ne montre que visible-xs-* ci-dessous) :

  • visible-xs-block
  • visible-xs-inline
  • visible-xs-inline-block
  1. Lorsque vous utilisez ces classes, vous n'ajoutez pas de point devant (comme indiqué de manière confuse dans une partie de la réponse ci-dessus).

Par exemple :

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright © 2014 Jazimov</h5>
</div>
  1. Vous pouvez utiliser visible- et hidden- (par exemple, visible-xs et hidden-xs) mais ils ont été dépréciés dans Bootstrap 3.2.0.

Pour plus de détails et les dernières spécifications, allez ici et cherchez "visible" : http://getbootstrap.com/css/

Commentaires (3)