时间戳

首页 > 解决方案 > Bootstrap 4 与可折叠和显示实用程序的兼容性

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

问题描述

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

基本上我想#demo默认显示sm, md, lg, and xl并在移动视图上隐藏它，根据这个在使用显示属性时xs在 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>

标签： htmlcssbootstrap-4collapsedisplay

解决方案

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

推荐阅读