Bootstrap 5中的導覽列下拉選單（折疊）有功能異常問題
P粉322319601
2023-08-22 20:42:45
<p>我在嘗試使用<code>Bootstrap 5</code>建立響應式選單或下拉按鈕時遇到了問題。一切似乎都沒問題。導航圖示和下拉圖示都顯示出來了。但是它們不起作用。當我點擊<code>nav</code>圖示或<code>dropdown</code>按鈕時，沒有出現<code>dropdown選單</code>。 </p>
<p>我想特別提到的是，我還包含了<code>jquery</code>文件。但它沒有起作用。有人可以告訴我這裡發生了什麼事嗎？ </p>
<p>最後一件事，我在使用其他一些<code>bootstrap</code>類別（如<code>mr-auto</code>，<code>ml-auto<ml>等）時遇到了嚴重的問題。這是一個bug還是<code>bootstrap 5</code>引進了新的類別來完成這種工作？ </p>
<p><strong>以下是我的程式碼：</strong></p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<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>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a href="#" class="navbar-brand">DemoTech</a>
<button
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">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<script
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>
在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。