简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Es gibt ein Funktionsproblem mit dem Dropdown-Menü der Navigationsleiste (Ausblenden) in Bootstrap 5
P粉322319601
P粉322319601 2023-08-22 20:42:45
0
1
710
<p>Beim Versuch, mit <code>Bootstrap 5</code> ein responsives Menü oder eine Dropdown-Schaltfläche zu erstellen, ist ein Problem aufgetreten. Alles scheint in Ordnung zu sein. Sowohl das Navigationssymbol als auch das Dropdown-Symbol werden angezeigt. Aber sie funktionieren nicht. Wenn ich auf das Symbol <code>nav</code> klicke, wird das Dropdown-Menü <code></code> nicht angezeigt. </p> <p>Ich möchte ausdrücklich erwähnen, dass ich auch die Datei <code>jquery</code> eingebunden habe. Aber es hat nicht funktioniert. Kann mir jemand sagen, was hier los ist? </p> <p>Eine letzte Sache: Ich verwende einige andere <code>bootstrap</code>-Klassen (wie <code>mr-auto</code>, <code>ml-auto</code> usw.). . ) ist auf ein ernstes Problem gestoßen.Ist das ein Fehler oder führt <code>bootstrap 5</code> neue Klassen ein, um diese Art von Aufgabe zu erledigen? </p> <p><strong>Hier ist mein Code: </strong></p> <p><br /></p> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bootstrap</title> <Link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" Integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> </head> <Körper> <nav class="navbar navbar-dark bg-dark navbar-expand-md"> <a href="#" class="navbar-brand">DemoTech</a> <-Taste class="navbar-toggler" data-toggle="collapse" data-target="#navbar" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse Collapse" id="navbar" navbar> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Über</a></li> <li class="nav-item"><a href="#" class="nav-link">Kontakt</a></li> </ul> </div> </nav> <Skript src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" Integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> </body> </html></pre> <p><br /></p>
P粉322319601
P粉322319601

Antworte allen(1)
P粉550257856
P粉5502578562023-08-23 13:15:31 1 Etage

在Bootstrap 5中，Bootstrap 4中使用的data-*属性已被替换为data-bs-*

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

演示

如文档中所解释的，所有JavaScript插件的数据属性现在被命名空间化，以帮助区分Bootstrap功能与第三方和您自己的代码。这意味着任何javascript组件（折叠、导航栏、轮播、下拉菜单、选项卡、模态框等）只能使用data-bs-...属性。

Bootstrap 5是一个重大更新，带有重大变化。此外，在这里查看，ml-auto/mr-auto已更改为ms-auto/me-auto。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！