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 (
• Kleine Geräte: Tablets (≥768px) – .visible-sm-* ( show), .hidden-sm (hide)
• Medium Devices: Desktops (≥992px) – .visible-md-* (anzeigen), .hidden-md (verbergen)
• Große Geräte: Desktops (≥1200px) – .visible-lg-* ( show), .hidden-lg (hide)

Beispiel Verwendung:

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 veraltet .visible-*.
• In älteren Bootstrap-Versionen sind .hidden-phone und .hidden-tablet veraltet.