Elemente in Bootstrap-Responsive-Layouts ausblenden

Verbessern Sie Ihr Bootstrap-Design, indem Sie die Sichtbarkeit von Inhalten auf verschiedenen Bildschirmgrößen optimieren. Bootstrap bietet Funktionen zum Anzeigen von Menüelementen auf kleineren Geräten, aber was ist mit anderen Seitenelementen?

Um dieses Problem zu beheben, stellt Bootstrap „sichtbare“ und „versteckte“ Klassen bereit, mit denen Sie Elemente basierend auf dem Bildschirm dynamisch anzeigen oder verbergen können Größe. Zu den verfügbaren Klassen gehören:

Sichtbare Klassen:

• .visible-xs-block: Auf besonders kleinen Geräten (Telefonen) anzeigen
• .visible-sm-block: Auf kleinen Geräten (Tablets) anzeigen
• .visible-md-block: Auf mittelgroßen Geräten anzeigen (Desktops)
• .visible-lg-block: Auf großen Geräten anzeigen (Desktops)

Versteckte Klassen:

• .hidden-xs: Auf besonders kleinen Geräten (Telefonen) ausblenden
• .hidden-sm: Auf kleinen Geräten ausblenden (Tablets)
• .hidden-md: Auf mittelgroßen Geräten (Desktops) ausblenden
• .hidden-lg: Auf großen Geräten (Desktops) ausblenden

Ausblenden Wenn Sie Ihre Navigationspillen auf kleineren Bildschirmen verwenden möchten, fügen Sie einfach die Klasse .hidden-xs dem entsprechenden Container hinzu.

...

Alternativ können Sie die Klasse „hidden-*-down“ verwenden, die Elemente am angegebenen Haltepunkt oder ausblendet kleiner.

...

Denken Sie daran, die zu verwenden „visible-*-up“-Klasse, wenn Sie das Element am angegebenen Haltepunkt oder darüber hinaus anzeigen möchten.

Weitere Informationen zu den responsiven Dienstprogrammklassen von Bootstrap finden Sie in der offiziellen Dokumentation unter http://getbootstrap.com /css/#responsive-utilities.