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

标签 css twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-2

<分区>

我有一个用于 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/

相关文章:

html - 仅当前一个 div 存在时才应用 css 规则

html - 如何在图像后立即修复边距

css - Bootstrap 在标签而不是表单字段中有反馈图标

jquery - 带有可滚动主体和导轨固定标题的表格

jquery - 页面滚动时更改标题背景颜色

html - 重新加载页面时,Sprite 导航菜单在 IE 中呈现不正确

javascript - AngularJS 表单模板

css - 在 Twitter Bootstrap 中调整元素大小

javascript - 如何在动态 li 中为第一个选项卡添加事件类

css - 如何删除一个元素的 .has-error 输入样式?