崩溃中的引导下拉菜单，

我正在使用Bootstrap 2.0.3，下拉菜单里面是可折叠/可展开的div。当下拉菜单溢出div时，它们会被切断（但它们不应该）。的jsfiddle来说明：http://jsfiddle.net/t3wFK/1/崩溃中的引导下拉菜单，

在引导2.0.2菜单不会被切断：http://jsfiddle.net/u3wkK/

我发现半个解决方法通过使用CSS规则如下：

#stuff.in { 
    overflow: visible; 
}

“关于在'每当标有'collapse'的div被扩展时，CSSss就会被bootstrap添加。

很抱歉，此变通办法在Firefox中完全失效。

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

来源

2012-08-12 chris6953

这里的问题似乎是在2.0.3，引导的.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! */ 
}

如果你不希望修改引导的CSS（可能会产生意想不到的副作用在评论中提到的），你可以添加shown和hide事件处理程序到你的#stuff元素来修改overflow属性：

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

来源

2012-08-15 01:38:18 jackwanders

与对其他答案的评论一样，“overflow：hidden”没有改变的原因是因为CSS转换在某些情况下看起来很糟糕，特别是依赖于这个类的手风琴。绝对不是一个错误。 – merv 2012-08-15 01:47:28

有效。我已经更新了我的回答，以使用事件处理程序，而只是在'.collapse'元素完全展开时修改'overflow'属性。 – jackwanders 2012-08-15 01:52:17

得到我的投票;-) – merv 2012-08-15 01:54:34

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

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

.in { 
    overflow: visible !important; 
}

来源

2012-08-12 21:49:07

你可能想要更新jsfiddle，以便它包括CSS。 – darksky 2012-08-12 22:30:44

@darksky谢谢，我发布了错误的链接 – 2012-08-12 22:39:10

我想补充一点警告，这将会导致手风琴组件的转换。如果你确实使用了这个，绝对应用它，而不仅仅是'.in'。 – merv 2012-08-15 01:30:28

我试过你用Bootstrap 2.1.1的解决方法，它在Firefox 16中打破，只是第一次工作，然后根本不打开。

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

所以我发现这个问题依赖于导航崩溃元素至极的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">

我花了一段时间弄清楚！

来源

2012-10-22 14:58:06

我是做了很多研究此找到了解决问题的办法，加入这行代码的CSS，我发现这在https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202

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

这奏效了，我希望这个作品为你

来源

2013-06-11 05:27:22 LegendaryAks

崩溃中的引导下拉菜单，

回答

相关问题