为什么 Bootstrap 3 中没有内置子菜单类，如何创建一个？

Bootstrap 子菜单问题：原因和解决方案

尽管 Bootstrap 3 在开发过程中表现突出，但人们仍然担心子菜单的明显缺失班级。本指南阐明了这种遗漏背后的原因，并提供了实现子菜单的实用补救措施。

为什么 Bootstrap 3 中缺少下拉子菜单？

在随着 Bootstrap 3 RC 的出现，Bootstrap 下拉子菜单类已被弃用。这一决定源于当代网页设计中子菜单的相关性降低，特别是在移动设备上。

构建子菜单的解决方案

Bootstrap 5：

• JavaScript方法： 通过在“阻止”和“无”之间切换显示，防止子菜单在父下拉菜单打开时关闭。
• 仅 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中文网其他相关文章！