崩溃中的引导下拉菜单，

Posted 2023-03-24

【中文标题】崩溃中的引导下拉菜单，

【英文标题】：bootstrap dropdown in collapse,

【发布时间】：2012-08-09 04:39:11

【问题描述】：

我使用的是 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;

每当标有“折叠”的 div 展开时，引导程序就会添加“in”css 类。

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

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

【参考方案1】：

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

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

.in 
    overflow: visible !important;

【讨论】：

您可能需要更新 jsfiddle 以使其包含 CSS。

我要添加警告说明，这将搞砸诸如手风琴组件之类的过渡。如果您确实使用它，请务必使用更具体的选择器来应用它，而不仅仅是 .in。

【参考方案2】：

这里的问题似乎是在 2.0.3 中，Bootstrap 将 .collapse 类应用于 #stuff 元素。在引导 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（如 cmets 中所述，可能会产生意想不到的副作用），您可以将 shown 和 hide 事件处理程序添加到您的 #stuff 元素以修改 overflow属性：

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

【讨论】：

与对另一个答案的评论一样，overflow: hidden 未更改的原因是因为 CSS 转换在某些情况下看起来很糟糕，特别是对于依赖于此类的手风琴。绝对不是错误。

有效。我更新了我的答案以使用事件处理程序，而不是只修改 overflow 属性，而 .collapse 元素完全展开。

在相关说明中，我不知道我喜欢 Bootstrap 在展开动画之前应用 .in 类，但也在折叠动画之前将其删除。对我来说，应用 .in 类似乎更有意义，只要元素没有隐藏，或者仅在元素完全可见时应用它。

但这就是 CSS3 过渡的首要原因！我认为它们包含hide/hidden 和show/shown 的事实提供了足够的控制空间，因为您的解决方法很好地证明了这一点。

对；我一直忘记他们使用的是 css3 过渡而不是基于 javascript 的动画。你完全正确。

【参考方案3】：

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

所以javascript需要类.collapse来设置自动高度：

<div class="nav-collapse collapse">

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

【参考方案4】：

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

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

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