Question

我不确定有多少人遇到过此问题，因为我无法真正找到有关此问题的信息，但我注意到Bootstrap 4显示实用程序不能与.collapse类一起正常使用，而该类以前可以正常使用引导程序3。

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

因此，当我单击移动视图上的折叠按钮时，我想显示#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>

小提琴： http://jsfiddle.net/aq9Laaew/137247/

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

1 个答案: