bootstrap 在特定断点处崩溃

Question

Bootstrap 折叠手风琴上的切换功能是否只能在更大的分辨率上禁用？

我们的目标是让手风琴在具有切换状态选项的小分辨率上折叠，并在没有切换状态选项的大分辨率上展开。使用 Bootstrap 内置功能实现此目的的最佳方法是什么？

无论如何要在 vanilla js 中做到这一点？

Answer 1

这不是 vanilla js，但由于 Bootstrap 使用 jQuery，这样做可能更方便。

您可以通过禁用点击事件来实现：

$('a[data-toggle="collapse"]').click(function(e){
    if ($(window).width() >= 768) {  
        e.stopPropagation();
    }    
});

您还需要切换折叠的手风琴 div 类：

$(window).resize(function(){
    if ($(window).width() >= 768){  
        $('.panel-collapse').addClass('in');
    }
    if ($(window).width() <= 768){  
        $('.panel-collapse').removeClass('in');
    }
});