Wie verstecke ich Elemente in responsiven Layouts mit Bootstrap?

Elemente in responsiven Layouts mit Bootstrap ausblenden

Beim Entwerfen responsiver Layouts ist die Platzverwaltung von entscheidender Bedeutung, insbesondere auf kleineren Bildschirmen. Bootstrap bietet Unterstützung für das Reduzieren von Menüleistenelementen für mobile Geräte, aber was ist, wenn Sie andere Seitenelemente auf ähnliche Weise ausblenden möchten?

Lösung:

Bootstrap bietet Klassen, die Ihnen dies ermöglichen um Elemente basierend auf der Bildschirmgröße auszublenden:

• Extra kleine Geräte: Telefone (<768px) – .visible-xs-* (anzeigen), .hidden-xs (ausblenden )
• Kleine Geräte: Tablets (≥768px) – .visible-sm-* (anzeigen), .hidden-sm (verbergen)
• Mittelgroße Geräte : Desktops (≥992px) – .visible-md-* (anzeigen), .hidden-md (verbergen)
• Große Geräte: Desktops (≥1200px) – .visible -lg-* (anzeigen), .hidden-lg (verstecken)

Beispielverwendung:

Um ein .nav-pills-Element auf kleinen Bildschirmen auszublenden :

  ...
Zusätzliche Hinweise:

Verwenden Sie für Bootstrap 4 „hidden-*-up“ (versteckt sich bei größeren Haltepunkten) oder „hidden-*-down“. (wird für kleinere Haltepunkte ausgeblendet).
Bootstrap 3.2.0 hat .hidden-* zugunsten von .visible-* veraltet.
In älteren Bootstrap-Versionen .hidden-phone und .hidden-tablet sind veraltet.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Elemente in responsiven Layouts mit Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!