Wie steuere ich die Elementsichtbarkeit in Bootstrap-Responsive-Layouts?

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 mittleren Geräten (Desktops) anzeigen
• .visible-lg-block: Auf großen Geräten anzeigen Geräte (Desktops)

Versteckte Klassen:

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

Um Ihre Navigationspillen auf kleineren Bildschirmen auszublenden, fügen Sie einfach die .hidden-xs-Klasse zum entsprechenden Container hinzu.

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

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

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

Denken Sie daran, die Klasse „visible-*-up“ zu verwenden, 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.

Das obige ist der detaillierte Inhalt vonWie steuere ich die Elementsichtbarkeit in Bootstrap-Responsive-Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!