wake-up-neo.net

Bootstrap3 .visible- * .hidden- * Anzeige inline

Bootstrap verfügt über das Nice-Programm .visible-* (zB .visible-lg), um abhängig von der Bildschirmgröße auszuwählen, was angezeigt oder ausgeblendet werden soll.

Bei Verwendung dieser Klassen wird der Stil display: block !important; angewendet, wenn er die richtige Bildschirmgröße hat.

Aber manchmal möchte ich es für einige Elemente verwenden, die inline oder inline-block angezeigt werden.

Wie kann ich einige Bootstrap-Regeln sauber überschreiben, um die Wahl zu haben? Oder sollte es eine Feature-Anfrage in Bootstrap sein?


BEARBEITEN

Anscheinend bin ich nicht der einzige, der sich über dieses Thema wundert. Hier ist die github Ausgabe .

Danke für die neueste Antwort!

44

Update für Bootstrap v3.2.0

Dies ist jetzt in Bootstrap v3.2.0 nativ gelöst mit diesem Commit

Entsprechend der neuen responsive-Klassen-Dokumentation :

Seit Version 3.2.0 gibt es für die einzelnen Klassen die .visible -- -Klassen in drei Variationen, eine für jeden unten aufgelisteten CSS-Eigenschaftswert:

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

Sie könnten beispielsweise Folgendes verwenden:

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

Andere Instanzen

Über Stackoverflow gefragt:

In Bootstrap-Problemen gemeldet:

63
KyleMit

Dieses Problem wurde in Version 3.1 behoben.

.visible-lg oder .visible-md erzwingt display: block !important;, aber die Verwendung von .hidden-xs oder .hidden-sm wird inline angezeigt.

15
Pratyush

Die folgende Bibliothek erweitert die sichtbaren Hilfsklassen um Inline- und Inline-Block-Varianten:

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

Implementiert Folgendes:

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

und

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

Das Aktualisieren auf Bootstrap 3.1 oder höher löst das Problem tatsächlich, da ab diesem Zeitpunkt nur die hidden--Klassen das Tag verstecken und display: block nicht mehr setzen. Auf diese Weise können Sie <div> für Blockkontext und <span> für Inline-Blockkontext verwenden (das normale Verhalten dieser Tags).

1
dhm80