Html Bootstrap 4与可折叠文件和显示实用程序的兼容性

我不确定有多少人遇到过这个问题，因为我真的找不到关于它的问题，但我注意到Bootstrap 4显示实用程序不能与

一起正常工作。collapse

类用于与Bootstrap 3一起正常工作

基本上，我想在默认情况下在

sm、md、lg和xl

上显示

#demo

，并在移动视图中隐藏它，

xs

，根据何时使用显示属性，它在引导程序4中不存在

因此，当我单击移动视图上的折叠按钮时，我希望显示

#demo

另外，

.collasing

也不能正常工作。在此方面的任何帮助都将不胜感激

.container{
利润率：30像素；
}

引导示例
简单可折叠
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。
如果您查看
显示无
，它正在执行
显示：无！重要的，这就是为什么在小型设备上切换折叠将不起作用，因为它总是隐藏的

我的解决方案看起来很傻，但它应该工作得很好-您可以复制折叠并根据不同的断点显示/隐藏另一个

<div class="d-sm-none">
    <button type="button" class="btn btn-primary" data-toggle="collapse" 
      data-target="#demo">
       Simple collapsible
    </button>
    <!-- Collapse by default -->
    <div id="demo" class="collapse">
        ...
    </div>    
</div>
<div class="d-none d-sm-block">
    <button type="button" class="btn btn-primary" data-toggle="collapse" 
      data-target="#demo-sm">
        Simple collapsible
    </button>
    <!-- Display by default -->
    <div id="demo-sm" class="show collapse">
        ...
    </div>   
</div> 


简单可折叠
...
简单可折叠
...

小提琴：
我不太明白这个问题。
sm
及更大屏幕上的按钮有什么作用？它是否也用于切换#demo？是的，在sm和更大版本上切换#demo的按钮。我还想让它在移动视图上正确地切换#demo和崩溃的过渡。花了几个小时来解决这个问题，你的解决方案很有魅力。谢谢