Warum funktioniert mein Bootstrap 4-Dropdown-Menü nicht?-CSS-Tutorial-php.cn

Warum funktioniert mein Bootstrap 4-Dropdown-Menü nicht?

Barbara Streisand

Freigeben： 2024-11-18 01:10:01

Original

267 Leute haben es durchsucht

Why is my Bootstrap 4 Dropdown Menu Not Working?

Warum funktioniert mein Bootstrap 4 Dropdown-Menü nicht?

Problem:

Sie' Wir haben das offizielle Bootstrap 4-Beispiel für Dropdown-Menüs implementiert, diese werden jedoch nicht angezeigt, wenn darauf geklickt wird.

Mögliche Lösungen:

Stellen Sie Folgendes sicher:

Erforderliche Dateien einschließen:
- Überprüfen Sie, ob Sie jQuery, Popper.js und Bootstrap.js in der richtigen Reihenfolge eingebunden haben.
Konsole auf Fehler prüfen:
- Überprüfen Sie die Browserkonsole auf Fehler oder Warnungen.
Element-IDs bestätigen:
- Stellen Sie sicher, dass die ID-Attribute des Dropdown-Schalters (dropdown01) und des Dropdown-Menüs (aria-labelledby="dropdown01" ) übereinstimmen.

Lösung spezifischer Probleme:

Popper.js fehlt: Ja Es wurde berichtet, dass das Fehlen von Popper.js dieses Problem verursachen kann. Stellen Sie sicher, dass Popper.js enthalten ist und ordnungsgemäß funktioniert.
Veraltete Bootstrap-Version: Stellen Sie sicher, dass Sie die neueste Version von Bootstrap 4 verwenden. Ältere Versionen können dieses Verhalten aufweisen.

Arbeitsbeispiel:

Unten finden Sie ein voll funktionsfähiges Beispiel eines Bootstrap 4-Dropdown-Menüs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Bootstrap 4-Dropdown-Menü nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!