為什麼 Bootstrap 3 中沒有內建子選單類，如何建立一個？

Bootstrap 子選單問題：原因和解決方案

儘管Bootstrap 3 在開發過程中表現突出，但人們仍然擔心子選單的明顯缺失班級。本指南闡明了這種遺漏背後的原因，並提供了實現子選單的實用補救措施。

為什麼 Bootstrap 3 缺少下拉子選單？

在隨著 Bootstrap 3 RC 的出現，Bootstrap 下拉子選單類別已被棄用。這項決定源自於當代網頁設計中子選單的相關性降低，特別是在行動裝置上。

建構子選單的解決方案

Bootstrap 5：

• <script> >透過在「封鎖」和「無」之間切換顯示，防止子選單在父下拉選單開啟時關閉。 <strong></script>
僅 CSS 方法（適用於導覽列下拉選單）：
• 位置使用CSS懸停事​​件顯示的子選單。

Bootstrap 4:

CSS Hack：
• 使用附加CSS 規則模擬子選單功能，包括定位和懸停效果。

Bootstrap 3:

舊方法：
• 利用原始CSS 和標記來保持與舊Bootstrap 版本的兼容性。

範例實作（引導程式3):

<div class="dropdown">
  <button class="dropdown-toggle" data-toggle="dropdown" type="button">
    Example Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

注意：

可能需要進行額外的CSS 調整才能正確對齊子選單。 透過遵循這些準則，開發人員可以無論使用什麼版本，都可以輕鬆在 Bootstrap 中實現子選單功能。

以上是為什麼 Bootstrap 3 中沒有內建子選單類，如何建立一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！