Bootstrap 2.x 下拉菜单在 3.3.1 中不起作用

Question

我有一个 bootstrap dropdown-menu 的代码，它与 Bootstrap v2.x here.

一起使用

我有相同的代码 here，但包含 Bootstrap v3.3.1。

第二个不行，第一个不行。关于如何使下拉菜单组件与 bootstrap 3 一起使用的任何想法？

Answer 1

子菜单在 bootstrap 3.0 中被删除，因为它们对移动设备不是很友好。他们 css 黑客在那里让他们工作。

通过添加一些 css:

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {display: block;right:162px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

这是您的原始 fiddle，但用 css 进行了修改。 http://jsfiddle.net/mss9eaws/13/ 由于 bootstrap 3 css 中的更改，将鼠标悬停在菜单顶部时也会出现溢出问题。如果您同意它有效，请接受它作为答案，然后提出一个关于溢出的单独问题。

Bootstrap 2.x 下拉菜单在 3.3.1 中不起作用

Bootstrap 2.x dropdown menu not working in 3.3.1

css

twitter-bootstrap

twitter-bootstrap-3

twitter-bootstrap-2