Question

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

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

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

Answer 1

使用bootstrap 3.0删除

子菜单，因为它们对移动设备不是很友好。他们是css hacks在那里让他们工作。

添加一些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;}

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

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

1 个答案: