
Bootstrap 5 導(dǎo)覽列下拉問題
嘗試使用Bootstrap 5 實現(xiàn)響應(yīng)式導(dǎo)航選單時,使用者可能會遇到下拉式選單的問題或選單項目無法如預(yù)期運作。即使專案中包含 jQuery,也可能會出現(xiàn)此問題。
原因
在 Bootstrap 5 中,JavaScript 外掛程式的 data-* 屬性已變更。之前使用的是 data-toggle 和 data-target,但在 Bootstrap 5 中,它們已分別替換為 data-bs-toggle 和 data-bs-target。
解決方案
要解決此問題,請將舊的 data- 屬性替換為新的data-bs-屬性:
<button>
其他注意事項
除了data-* 屬性的變更之外,Bootstrap 5 還引入了其他變更。例如,ml-auto 和 mr-auto 類別已替換為 ms-auto 和 me-auto。
示範(fàn)
此程式碼片段示範(fàn)了功能下拉清單按鈕:
<!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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav>
以上是為什麼我的 Bootstrap 5 導(dǎo)覽列下拉選單即使使用 jQuery 也不起作用?的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!