twitter-bootstrap Bootstrap 响应折叠子菜单在第一次折叠时具有固定的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14735747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Responsive Collapsed Submenu has fixed height on first collapse
提问by Charles Kirk
This problem can be exhibited in all (that I know of) Twitter Bootstrap versions. So, I have a navbar and when the screen is smaller, it becomes a collapsable tray. This behaviour can be seen on the bootstrap demo site. I also have submenus, which appear collapsed on the initial navbar expansion. The problem is, on the first collapse, the collapsable gets an explicit height set. If you close and expand again, the collapsable gets a height:auto;
这个问题可以在所有（我知道的）Twitter Bootstrap 版本中表现出来。所以，我有一个导航栏，当屏幕变小时，它变成了一个可折叠的托盘。这种行为可以在引导演示站点上看到。我还有子菜单，它们在初始导航栏扩展时出现折叠状态。问题是，在第一次折叠时，可折叠对象获得明确的高度集。如果您关闭并再次展开，可折叠的将获得一个height:auto;
So, when I click a submenu item, the dropdown is expanded, but it overflows due to the height being explicitly set.
所以，当我点击一个子菜单项时，下拉菜单会展开，但由于高度被明确设置，它会溢出。
My attempted solution was adding:
我尝试的解决方案是添加：
$(function() {
$('.nav-collapse').on({
shown: function() {
$(this).css('height', 'auto');
},
hidden: function() {
$(this).css('height', '0px');
}
});
});
This doesn't seem to affect it at all, I've deleted that code and it still has the same effect. If a JS Fiddle would help, I'd be happy to provide one, but you can see all of this on the Bootstrap demo site.
这似乎根本不会影响它，我已经删除了该代码，它仍然具有相同的效果。如果 JS Fiddle 有帮助，我很乐意提供一个，但您可以在 Bootstrap 演示站点上看到所有这些。
Thanks in advance, Charles.
提前致谢，查尔斯。
回答by Sherbrow
It bothered me a little, and after some searching, I found that the problem can be solved by adding the .collapseclass to the .nav-collapseelement.
有点困扰，经过一番搜索，发现可以通过将.collapse类添加到.nav-collapse元素中来解决问题。
One of those time when we just say Meh.. I should have followed the doc to the letter(see Responsive navbar):
有一次我们只说Meh .. 我应该按照文档来写（见参考资料Responsive navbar）：
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
For posterity :
为后人：
Found out thanks to this issue : https://github.com/twitter/bootstrap/issues/3788
由于这个问题发现：https: //github.com/twitter/bootstrap/issues/3788
I'm not sure if it really is related, but my debugging showed the problem on the first transition height resetting anyway (source) :
我不确定它是否真的相关，但我的调试显示了第一次重置过渡高度的问题（来源）：
$.support.transition && this.$element[dimension](this.$element[0][scroll])
回答by JeffK
Bootstrap is setting the element style height to 280px on initialization of the collapse element.
Bootstrap 在折叠元素初始化时将元素样式高度设置为 280px。
I added this JQuery line in my ready() function right after my call to .collapse()
我在调用 .collapse() 后立即在我的 ready() 函数中添加了此 JQuery 行
$("#avail_detail").collapse();
$("#avail_detail").css("height","auto");
And, now things behave as I expect.
而且，现在事情按照我的预期进行。
