我不确定有多少人遇到过这个问题，因为我真的找不到关于它的问题，但我注意到 Bootstrap 4 显示实用程序不能与使用的 .collapse 类一起正常工作与 Bootstrap 3 一起正常工作。
基本上我想在 sm、md、lg 和 xl 上默认显示 #demo 并在移动 View 上隐藏它，xs根据 this，Bootstrap 4 中不存在使用显示属性时。
因此，当我在移动 View 上单击折叠按钮时，我希望显示#demo。
此外，.collapsing 也无法正常工作。非常感谢任何对此的帮助。
.container {
margin: 30px;
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="d-none d-sm-block collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>最佳答案
如果您查看 display-none，它正在执行 display:none !important;，这就是为什么在小型设备上切换折叠不会正常工作的原因始终隐藏。
我的解决方案看起来很愚蠢，但它应该工作得很好——你复制折叠并根据不同的断点显示一个/隐藏另一个。
<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>
fiddle : http://jsfiddle.net/aq9Laaew/137247/
关于html - Bootstrap 4 与可折叠和显示实用程序的兼容性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51716824/