Bootstrap3 .visible-* .cachée* affichage inline

Bootstrap a quelques belles .visible-* (eg. .visible-lg) classe utilitaire pour faire des choix d'afficher ou de masquer en fonction de la taille de l'écran.

Lors de l'utilisation de ces classes, il applique le style display: block !important; lorsque dans la bonne taille de l'écran.

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

Comment ai-je pu proprement remplacer certains bootstrap règles pour le choix? Ou devrait-il être une demande de fonctionnalité dans le bootstrap?

MODIFIER

Semble que je ne suis pas le seul à s'interroger sur cette question. Voici la github problème.

Merci pour la dernière réponse!

  • Cela a déjà été proposé et rejeté: github.com/twbs/bootstrap/issues/8869
  • Pas sûr qu'ils totalement rejetée. Ils mentionnent v3.1 à la fin. Ayant .visible-inline-lg fait beaucoup de sens pour moi.
  • Regarde comme ils ont corrigé cela dans v. 3.2.0 avec l'ajout d'affichage spécifique sensible de la visibilité des classes. Voir ma réponse avec la mise à jour complète.
InformationsquelleAutor Augustin Riedinger | 2013-09-30
  1. 63

    Mise à jour pour Bootstrap v3.2.0

    C'est désormais nativement résolu dans le Bootstrap v3.2.0 avec ce commit

    Selon la nouveau réactif classes de la documentation:

    Comme de la v3.2.0, le .visible-- classes pour chaque point de venir dans trois variantes, un pour chaque CSS affichage de la valeur de la propriété énumérées ci-dessous:

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

    Par exemple, vous pourriez utiliser:

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

    D'Autres Instances

    Demandé à ce sujet sur Stackoverflow:

    Signalé dans le Bootstrap Questions:

    • Merci, pour la mise à jour. Aucune idée de pourquoi ils n'ont pas créer .hidden-*-*?
    • n'était pas rompu, car il serait seulement masquer des éléments basés sur screenwidth, qui ne nécessitent pas de poser un type d'affichage
    • Grand qui .visible--bloc est disponible. Mais pourquoi en est la contrepartie .cachée-bloc n'est disponible?
    InformationsquelleAutor KyleMit
  2. 15

    Cela a été en quelque sorte fixé dans v3.1.

    .visible-lg ou .visible-md force display: block !important; mais en utilisant .hidden-xs ou .hidden-sm affiche sur la ligne.

    • Pas sûr de comprendre comment il résout le problème.
    • Il résout le display inline problème en utilisant hidden-xs hidden-sm hidden-lg au lieu de visiblem-md.
    • N'est pas "caché" faire l'exact opposé de "visible", si?
    • caché cacher de la taille que vous choisissez , visible affiche sur l'écran de la taille dont vous avez besoin
    InformationsquelleAutor Pratyush
  3. 12

    La bibliothèque suivantes s'étend le visible helper classes avec inline & inline-block variations:

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

    Met en œuvre les suivantes:

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

    et

    • visible-inline-block-*
    • hidden-inline-block-*
    InformationsquelleAutor Chad Brown
  4. 1

    La mise à jour de bootstrap 3.1 ou au-dessus, en effet, permet de résoudre le problème à partir de ce point sur la hidden- catégories de cacher la balise et de ne pas définir display: block plus. De cette façon, vous pouvez utiliser <div> pour bloc de contexte et <span> pour inline-block contexte (le comportement normal de ces balises)

    InformationsquelleAutor dhm80