我使用的是Bootstrap 2.0.3,里面有可折叠/可展开的div的下拉菜单.当下拉菜单溢出div时,它们被切断(但不应该). Jsfiddle来说明:
http://jsfiddle.net/t3wFK/1/
在Bootstrap 2.0.2中,菜单不会被中断:http://jsfiddle.net/u3wkK/
通过使用css规则,我发现了一半的解决方法如下:
#stuff.in { overflow: visible; }
每当标有’collapse’的div被扩展时,’in’css类都会被bootstrap添加.
不幸的是,这种解决方法在Firefox中完全崩溃.
有任何想法吗?我正在考虑降级到Bootstrap 2.0.2,但这将是痛苦的.
解决方法
这里的问题似乎是在2.0.3中,Bootstrap将.collapse类应用于#stuff元素.在bootstrap css中,有一种风格:
.collapse { overflow: hidden; }
但是,当扩展一个.collapse目标时,overflow属性保持隐藏.
不知道它是否是一个错误(将不得不深入研究,看看是否有任何缺点这样做),但修改.collapse.in的规则将工作.
.collapse.in { height: auto; /* this style already exists in bootstrap.css */ overflow: visible; /* this one doesn't. Add it! */ }
如果您不想修改Bootstrap的CSS(可能会出现意见中提到的无意义的副作用),则可以将显示和隐藏事件处理程序添加到#stuff元素以修改overflow属性:
$('#stuff').on({ shown: function(){ $(this).css('overflow','visible'); },hide: function(){ $(this).css('overflow','hidden'); } });