Question

我开始使用bootstrap并使用菜单标题（带下拉项）制作了一个小html模板。

问题是，在我将窗口调整为足够小以强制响应菜单崩溃后，在折叠时使用下拉（导航），然后在最大化窗口后，下拉菜单项停止工作（显示滚动）查看内容而不是下拉内容。

示例代码？只需尝试＆＃34; Navbar模板＆＃34;来自bootstrap：http://getbootstrap.com/examples/navbar/

是否有针对此问题的已知修复程序？

在Firefox和Chrome中测试过。

Answer 1

<强>更新

在Bootstrap的CSS之后添加：

@media (min-width: 768px) 
{   
    .navbar-collapse.in{ overflow-y:visible;}
}

- 结束更新

是的，看起来“奇怪”的“in”类在重新调整大小后仍然有效。

您可以使用jquery删除该类：

$(document).ready(function() 
{
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {

        if ($window.width() >= 768) {
            $('.navbar-collapse').removeClass('in').addClass('collapse');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});

调整代码：Dynamically changing class name based on window size，更好的解决方案：How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

~~也许也可以使用媒体查询重置断点上方的屏幕宽度.in类。~~

这似乎是一个错误，请参阅：https://github.com/twbs/bootstrap/issues/11243

Answer 2

另一个答案对我不起作用，因为崩溃类添加了一个显示：none; （也许是不同版本的Bootstrap）。对我有用的解决方案是添加到响应式CSS：

@media screen and (min-width: 768px){
    .collapse{ display:block;}
}

对我来说，问题出现在我打开然后关闭折叠菜单，然后调整大小。希望这会有所帮助。

Answer 3

在折叠元素上强制自动高度（在断点之上）对我有效。

在切换按钮上查找id或类，例如。 data-target=".navbar-ex1-collapse"并使用最小宽度（您的断点）：

@media screen and (min-width: 768px){
    .navbar-ex1-collapse { height:auto !important;}
}

调整大小后，下拉菜单不起作用

3 个答案: