web-dev-qa-db-fra.com

Bootstrap3 .visible- * .hidden- * afficher en ligne

Bootstrap possède un utilitaire de classe Nice .visible-* (exemple: .visible-lg) permettant de sélectionner les éléments à afficher ou à masquer en fonction de la taille de l’écran.

Lors de l'utilisation de ces classes, le style display: block !important; est appliqué lorsque la taille d'écran est correcte.

Mais parfois, j'aimerais l'utiliser pour certains éléments qui sont affichés inline ou inline-block.

Comment pourrais-je clairement remplacer certaines règles de bootstrap pour avoir le choix? Ou devrait-il s'agir d'une demande de fonctionnalité dans le bootstrap?

MODIFIER

On dirait que je ne suis pas le seul à m'interroger sur ce problème. Voici le problème de github .

Merci pour la dernière réponse!

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
44
Augustin Riedinger

Mise à jour pour Bootstrap v3.2.0

Ceci est maintenant résolu de manière native dans Bootstrap v3.2.0 avec this commit

Selon la nouvelle documentation sur les classes réactives :

À partir de la version 3.2.0, les classes .visible -- de chaque point d'arrêt se déclinent en trois variantes, une pour chaque valeur de propriété d'affichage CSS répertoriée ci-dessous:

Group of classes          | CSS display
 .visible-*-block         |  display: block;
 .visible-*-inline        |  display: inline;
 .visible-*-inline-block  |  display: inline-block;

Par exemple, vous pouvez utiliser:

<p>Device is: <span class="visible-lg-inline">Large</span></p>

Autres instances

Questions posées sur Stackoverflow:

Rapporté dans les problèmes d'amorçage:

63
KyleMit

Cela a été corrigé en v3.1.

.visible-lg ou .visible-md forcera display: block !important; mais l'utilisation de .hidden-xs ou .hidden-sm s'affichera en ligne.

15
Pratyush

La bibliothèque suivante étend les classes d'assistance visibles avec des variantes inline et inline-block:

https://github.com/moappi/bootstrap.inline-responsive

Implémente ce qui suit:

  • visible-inline-*
  • hidden-inline-*

et

  • visible-inline-block-*
  • hidden-inline-block-*
12
Chad Brown

La mise à jour vers bootstrap 3.1 ou une version ultérieure résout effectivement le problème à partir de ce point sur les classes hidden- ne fait que masquer la balise et ne définit plus display: block. De cette façon, vous pouvez utiliser <div> pour le contexte de bloc et <span> pour le contexte inline-block (le comportement normal de ces balises).

1
dhm80