<分区>
我有一个用于 Bootstrap dropdown-menu
的代码,它与 Bootstrap v2.x 一起使用 here .
我有相同的代码 here ,但包含 Bootstrap v3.3.1。
第二个不起作用,而第一个起作用。关于如何使下拉菜单组件与 bootstrap 3 一起工作的任何想法?
<分区>
我有一个用于 Bootstrap dropdown-menu
的代码,它与 Bootstrap v2.x 一起使用 here .
我有相同的代码 here ,但包含 Bootstrap v3.3.1。
第二个不起作用,而第一个起作用。关于如何使下拉菜单组件与 bootstrap 3 一起工作的任何想法?
最佳答案
bootstrap 3.0 中删除了子菜单,因为它们对移动设备不是很友好。他们是 css hack 在那里让他们工作。
通过添加一些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 的变化,当鼠标悬停在菜单的顶部时,您也会遇到溢出问题。如果您同意它有效,请接受它作为答案,然后提出一个关于溢出的单独问题。
关于css - Bootstrap 2.x 下拉菜单在 3.3.1 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34346878/