首頁 > web前端 > css教學 > Bootstrap 5 導覽列下拉選單:為什麼我的下拉式選單不會折疊,如何修復它?

Bootstrap 5 導覽列下拉選單:為什麼我的下拉式選單不會折疊,如何修復它?

DDD
發布: 2024-12-27 10:01:10
原創
272 人瀏覽過

Bootstrap 5 Navbar Dropdown: Why Doesn't My Dropdown Collapse, and How Do I Fix It?

Bootstrap 5 導覽列下拉問題:解決折疊功能

此討論解決了嘗試使用Bootstrap 建立響應式選單或下拉按鈕時遇到的挑戰5. 儘管合併了必要的導航和下拉圖標,但下拉式選單仍然沒有回應。此外,作者在使用其他 Bootstrap 類別(例如 mr-auto 和 ml-auto)時也遇到了困難。

這些問題的根本原因在於從 Bootstrap 4 到 Bootstrap 5 的過渡。 Bootstrap 5 引入了重大變化,包括將所有 JavaScript 插件的 data- 屬性替換為 data-bs- 屬性。此修改適用於各種 JavaScript 元件,包括 Collapse、Navbar、Carousel、Dropdown、Tabs 和 Modal。

為了解決下拉清單折疊問題,以下程式碼片段說明了正確的語法:

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>
登入後複製

這確保了資料屬性符合 Bootstrap 5 約定。

此外,Bootstrap 5 引入了新的類別來管理水平對齊,例如ms-auto和me-auto,它們取代了先前使用的ml-auto和mr-auto類。

以上是Bootstrap 5 導覽列下拉選單:為什麼我的下拉式選單不會折疊,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板