Bootstrap 5x 仅在移动设备上折叠答案

【问题标题】：Bootstrap 5x Collapse on Mobile OnlyBootstrap 5x 仅在移动设备上折叠
【发布时间】：2022-11-26 21:59:37
【问题描述】：

我尝试仅在移动设备上使用 Bootstrap 5x 中的默认折叠功能。即使我已经设置了 CSS 媒体查询（根据研究），.collapse 是否被忽略了？

折叠的 DIV 项目应该在移动设备上明显折叠并在任何宽度大于 768px 的设备上完全显示？但它在所有设备上仍然处于折叠状态。

<style>

@media screen and (min-width: 768px){
  .collapse {
      display: block;
      height: auto !important;
      visibility: visible;
    }
    .collapsing{
      position: relative;
      height: unset !important;
      overflow: hidden;
    }
}

</style> 




<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    EXAMPLE
  </a>
</p>
<div class="collapse" id="collapseExample">
  <p>
    Some placeholder content for the collapse component.
  </p>
</div>

关于我缺少什么的任何想法？

【问题讨论】：

使用您的浏览器开发工具来检查实际应用于该元素的样式以及它的来源。

标签： css twitter-bootstrap bootstrap-5

【解决方案1】：

更换

.collapse

和

.collapse:not(.show)

解决了显示问题

【讨论】：