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

Question

我不确定有多少人遇到过这个问题，因为我真的找不到关于它的问题，但我注意到 Bootstrap 4 个显示实用程序无法与 .collapse class 曾经与 Bootstrap 一起正常工作 3.

基本上我想在 sm, md, lg, and xl 上默认显示 #demo 并在移动视图中隐藏它，xs 根据 Bootstrap 4 不存在19=] 当使用显示属性.

因此，当我在移动视图上单击折叠按钮时，我希望 #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>

Answer 1

如果您查看 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/

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

Bootstrap 4 compatibility with collapsibles and display utilities

html

css

collapse

display

bootstrap-4