Twitter Bootstrap 多级下拉菜单 [英] Twitter Bootstrap Multilevel Dropdown Menu

问题描述

是否可以使用 twitter bootstrap 2 的元素来创建多级下拉菜单?原版没有这个功能.

Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2? The original version doesn't have this feature.

推荐答案

更新答案

^{* 更新了支持 v2.1.1** 引导版本样式表的答案.}

^{**但是要小心，因为这个解决方案已经从 v3 中删除了}

只是想指出不再需要此解决方案，因为最新的引导程序现在默认支持多级下拉列表.如果您使用的是旧版本，您仍然可以使用它，但对于那些更新到最新版本(在撰写本文时为 v2.1.1)的人来说，不再需要它了.这是直接从文档中更新的默认多级下拉列表的小提琴:

Just wanted to point out that this solution is not needed anymore as the latest bootstrap now supports multi-level dropdowns by default. You can still use it if you're on older versions but for those who updated to the latest (v2.1.1 at the time of writing) it is not needed anymore. Here is a fiddle with the updated default multi-level dropdown straight from the documentation:

http://jsfiddle.net/2Smgv/2858/

原答案

github 上的子菜单支持存在一些问题，它们通常被引导程序开发人员关闭，例如 这个，所以我认为它留给开发人员使用引导程序来解决问题.这是我放在一起的演示，向您展示了如何将工作子菜单组合在一起.

There have been some issues raised on submenu support over at github and they are usually closed by the bootstrap developers, such as this one, so i think it is left to the developers using the bootstrap to work something out. Here is a demo i put together showing you how you can hack together a working sub-menu.

相关代码

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

创建了我自己的 .sub-menu 类以应用于 2 级下拉菜单，这样我们就可以将它们放置在我们的菜单项旁边.还修改了箭头显示在子菜单组的左边.

Created my own .sub-menu class to apply to the 2-level drop down menus, this way we can position them next to our menu items. Also modified the arrow to display it on the left of the submenu group.

演示

这篇关于Twitter Bootstrap 多级下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！