Question

这个问题可以在所有（我知道的）Twitter Bootstrap版本中展示。所以，我有一个导航栏，当屏幕较小时，它就变成了一个可折叠的托盘。在bootstrap演示站点上可以看到此行为。我还有子菜单，它在初始导航栏扩展时显示为折叠状态。问题是，在第一次崩溃时，可折叠获得明确的高度设置。如果您再次关闭并展开，则可折叠可获得height:auto;

因此，当我单击子菜单项时，下拉列表会展开，但由于显式设置了高度，它会溢出。

我尝试的解决方案是添加：

$(function() {
  $('.nav-collapse').on({
    shown: function() {
      $(this).css('height', 'auto');
    },

    hidden: function() {
      $(this).css('height', '0px');
    }
  });
});

这似乎根本没有影响它，我删除了该代码，它仍然具有相同的效果。如果JS Fiddle有帮助，我很乐意提供一个，但你可以在Bootstrap演示网站上看到所有这些。

提前致谢，查尔斯。

Answer 1

让我感到困扰，经过一番搜索后，我发现可以通过将.collapse类添加到.nav-collapse元素来解决问题。

Working demo (jsfiddle)

其中一次，我们只是说 Meh ..我应该按照文档跟着（见Responsive navbar）：

<div class="nav-collapse collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

后人：

感谢此问题：https://github.com/twitter/bootstrap/issues/3788

我不确定它是否真的有关系，但我的调试显示第一个转换高度重置的问题（source）：

$.support.transition && this.$element[dimension](this.$element[0][scroll])

Answer 2

Bootstrap在初始化折叠元素时将元素样式高度设置为280px。

在调用.collapse（）

之后，我在ready（）函数中添加了这个JQuery行

$("#avail_detail").collapse();
$("#avail_detail").css("height","auto");

现在，事情就像我期望的那样。

Bootstrap Responsive Collapsed子菜单在第一次崩溃时具有固定的高度

2 个答案: