15

我正在使用 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 类。

不幸的是，这种解决方法在 Firefox 中完全失效。

有任何想法吗？我正在考虑降级到 Bootstrap 2.0.2，但这会很痛苦。

4

4 回答 4

18

这里的问题似乎是在 2.0.3 中，Bootstrap 将.collapse类应用于#stuff元素。在引导 css 中，有一种样式：

.collapse {
    overflow: hidden;
}

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

不确定它是否是错误（必须更深入地研究它以查看这样做是否有任何缺点），但修改规则 for.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');
    }
});
于 2012-08-15T01:38:18.903 回答
4

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

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

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

首先是代码：

<div class="nav-collapse">

然后在扩展第一次引导程序分配固定高度后：

<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;">

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

<div class="nav-collapse collapse">

我花了一段时间才弄清楚！

于 2012-10-22T14:58:06.280 回答
1

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

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

.in {
    overflow: visible !important;
}
于 2012-08-12T21:49:07.563 回答
1

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

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

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

于 2013-06-11T05:27:22.923 回答