Heim >Web-Frontend >CSS-Tutorial >Wie verhindert man das automatische Schließen des Bootstrap-Responsive-Menüs auf dem 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!