崩溃时自举下拉,

Question

我正在使用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被扩展,就会通过bootstrap添加'in'css类.

不幸的是,这种解决方法完全破坏了Firefox.

有任何想法吗？我正在考虑降级到Bootstrap 2.0.2,但那会很痛苦.

Answer 1

这里的问题似乎是在2.0.3中,Bootstrap将.collapse类应用于#stuff元素.在bootstrap css中,有一种风格:

.collapse {
    overflow: hidden;
}

但是,当您展开.collapse目标时,该overflow属性仍然存在hidden.

不确定它是否是一个错误(将不得不深入研究它是否有任何缺点),但修改规则.collapse.in将起作用.

.collapse.in {
    height: auto;  /* this style already exists in bootstrap.css */
    overflow: visible;  /* this one doesn't. Add it! */
}

如果您不想修改Bootstrap的CSS(可能会出现意外中出现的意外副作用),您可以向元素添加shown和hide事件处理程序#stuff以修改overflow属性:

$('#stuff').on({
    shown: function(){
        $(this).css('overflow','visible');
    },
    hide: function(){
        $(this).css('overflow','hidden');
    }
});