Heim >Web-Frontend >CSS-Tutorial >Wie verhindert man das automatische Schließen des Bootstrap-Responsive-Menüs auf dem Desktop?

Wie verhindert man das automatische Schließen des Bootstrap-Responsive-Menüs auf dem Desktop?

Barbara Streisand
Barbara StreisandOriginal
2024-11-08 17:11:02712Durchsuche

How to Prevent Bootstrap Responsive Menu Auto-Closure on Desktop?

Responsives automatisches Schließen des Menüs in Bootstrap

Problem:

Auf einer Bootstrap-Website Das responsive Menü öffnet eine weiße Leiste, wenn auf die Schaltfläche „PRODUKTE“ geklickt wird. Wenn sich die Website jedoch im Desktop-Modus befindet, wird das Menü durch Klicken auf die Schaltfläche unbeabsichtigt verkleinert.

Lösung:

Um zu verhindern, dass das Menü beim Klicken auf einem Desktop ausgeblendet wird, Vermeiden Sie das Hinzufügen von zusätzlichem JavaScript. Ändern Sie stattdessen die Menülistenelemente so, dass sie die Datenumschalt- und Datenzielselektoren enthalten. Zum Beispiel:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Wiederholen Sie diesen Schritt für jeden Menüpunkt.

Erweiterte Lösung zur Behebung von Überlaufproblemen:

Um Überlauf und Flackern zu beheben Probleme, integrieren Sie den folgenden Code:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Dadurch werden die Umschalt- und Zielselektoren spezifisch für die Bildschirmgröße, wodurch Störungen auf größeren Bildschirmen vermieden werden.

Bootstrap-Versionskompatibilität:

Beachten Sie, dass die sichtbaren/versteckten Klassen in den Bootstrap-Versionen 4.1.3 und 5.0 veraltet sind. Verwenden Sie d-none d-sm-block anstelle von versteckten xs und d-block d-sm-none anstelle von sichtbaren xs. Ersetzen Sie in Bootstrap-Version 5 data-toggle durch data-bs-toggle und data-target durch data-bs-target.

Das obige ist der detaillierte Inhalt vonWie verhindert man das automatische Schließen des Bootstrap-Responsive-Menüs auf dem Desktop?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn