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');
    }
});

Answer 2

我已尝试使用Bootstrap 2.1.1进行解决方法，它在Firefox 16中中断，只是第一次工作，然后根本没有打开。

就我而言，问题只是访问者第一次打开可折叠元素并应用了内联固定高度。第二次高度设置为自动。

所以我发现问题依赖于nav-collapse元素的html代码，它首先没有声明的状态：

首先是代码：

<div class="nav-collapse">

然后在第一次扩展bootstrap后指定固定高度：

<div class="nav-collapse in collapse" style="height: 286px;">

在第一次关闭高度后回到0：

<div class="nav-collapse collapse" style="height: 0px;">

第二次打开，它可以正常使用自动高度：

<div class="nav-collapse collapse" style="height: auto;">

因此，javascript需要类.collapse来设置自动高度：

<div class="nav-collapse collapse">

我花了一段时间才弄明白！

Answer 3

尝试使用!important标记，就像在Firefox中看到的那样，由于某种原因，属性会以不同的优先级读取。

http://jsfiddle.net/t3wFK/2/

.in {
    overflow: visible !important;
}

Answer 4

我正在做大量的研究，通过在css中添加这行代码找到问题的解决方案，我在https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202找到了这个

.collapse.in[style="height: auto;"] {overflow: visible;}

这对我有用，希望这对你有用

崩溃时自举下拉，

4 个答案: