如何在 Bootstrap 中建立懸停啟動的下拉式選單並刪除箭頭圖示？

Twitter Bootstrap 中的懸停啟動下拉選單

許多用戶更喜歡將Bootstrap 選單停留時下拉，從而無需明確點擊。本文討論了懸停功能和刪除選單標題旁邊的箭頭圖示。

懸停啟動的下拉選單

要在懸停時啟用自動下拉選單，請使用 CSS定位隱藏選單選項。將以下代碼添加到您的CSS 中：

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

對於響應式設計，請將代碼包裝在媒體查詢中：

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

刪除箭頭圖標

• 引導3： 刪除HTML 來自 .dropdown-toggle 錨元素。
• Bootstrap 2 及下部： 使用此CSS 選擇器定位並刪除箭頭：

a.menu:after, .dropdown-toggle:after {
    content: none;
}

透過合併這些CSS 修改，您可以實現懸停啟動的下拉式選單並消除箭頭圖標，從而增強用戶體驗並自訂您的根據需要引導選單。

以上是如何在 Bootstrap 中建立懸停啟動的下拉式選單並刪除箭頭圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！