如果窗口大小小于767px，可以用JavaScript添加data-toggle属性。
演示：https://jsfiddle.net/t1etnj5w/4/

$(document).ready(function(){
   console.log($(window).width());
   if ($(window).width() < 767) {
     $('.collapse-div').each(function(){
       $(this).attr('data-toggle','collapse'); 
     })
   }
})

虽然 这 是 一 个 老 问题 ， 我 遇到 这个 问题 ， 因为 我 有 一 个 类似 的 问题 。 也许 我 的 解决 方案 ， 使 引导 4 可 折叠 元素 的 响应 是 有 帮助 的 人 。
设计 原则 ：
1.我 的 方法 遵循 引导 程序 的 移动 优先 （ 即 小 屏幕 优先 ） 原则 ， 并 使用 引导 程序 的 断点 。
1.它 使用 来自 bootstrap 4 的 " show " 类 ， bootstrap 4 默认 使用 折叠 对象 的 切换 值 来 展开 。 并且 bootstrap 4 在 每次 用户 手动 切换 视图 时 改变 。
1.我 的 代码 为 class 属性 添加 了 响应 值 " show - * " ， 其中 * 代表 引导 程序 标准 断点 sm 、 md 、 lg 、 xl 。
使用 方法 ：
1.构建 常规 的 bootstrap 4html 代码 。 在 你 要 把 " show " 值 设置 为 默认 值 的 地方 ， 展开 一 个 要 显示 的 可 折叠 元素 ， 而 不是 相应 的 " show - * " 值 。
1.在 javascript 代码 中 包含 下面 的 jquery 代码 片段 。
用途 ：
1.可 折叠 元素 将 在 小 屏幕 上 显示 为 折叠 状态 ， 直到 指定 的 断点 ， 默认 情况 下 ， 从 指定 的 断点 开始 ， 该 元素 将 显示 为 展开 状态 。
1.调整 浏览 器 窗口 的 大小 将 调用 新 的 文档 宽度 测试 ， 并 将 " 显示 " 效果 调整 为 新 宽度 。
1.用户 仍然 可以 手动 切换 。 但是 任何 调整 大小 的 操作 都会 强制 可 折叠 元素 再次 返回 其 相应 的 默认 值 。

function responsiveCollapseView() {
        let desktopView = $(document).width();
        if(desktopView >= "1200"){
            $('.show-xl, .show-lg, .show-md, .show-sm').addClass('show')
        }
        else if(desktopView >= "992"){
            $('.show-lg, .show-md, .show-sm').addClass('show')
            $('.show-xl').removeClass('show')
        }
        else if(desktopView >= "768"){
            $('.show-md, .show-sm').addClass('show')
            $('.show-lg, .show-xl').removeClass('show')
        }
        else if(desktopView >= "576"){
            $('.show-sm').addClass('show')
            $('.show-xl, .show-lg, .show-md').removeClass('show')
        }
        else {
            $('.show-xl, .show-lg, .show-md, .show-sm').removeClass('show')
        }
    }
    $(function() {
        responsiveCollapseView();
        $(window).resize(function () {
            responsiveCollapseView()
        })
    });

中 的 每 一 个
玩 得 开心 点