Twitter bootstrap 如何控制特定屏幕尺寸上的折叠功能

我目前正在建立一个响应性网站，在那里我使用可折叠的面板来显示内容。我只希望在智能手机上使用可折叠功能，因为内容太多了

所以我有两种情况：

屏幕空间最小的平板电脑和智能手机

具有足够屏幕空间的桌面屏幕

基本上，我希望折叠功能只在

场景1

上工作，在场景1中，默认情况下所有面板都不折叠。在

场景2中

所有面板都应打开，折叠功能应禁用

因为我使用的是Bootstrap

collapse.js

，所以有没有一个好方法来处理这个任务

---

可以使用媒体查询来防止面板在较大的视口上折叠

CSS:

@media (min-width: 992px) { /*or 1200px if you just want it to affect the lg devices*/
  .collapsing {
    height: auto !important;
  }
  .collapse {
    height: auto !important;
    display: block;
  }
}

如本文所述：，collapse插件使用三个类来定义折叠元素的不同状态：.collapse（display设置为none）、.collapse.in（display设置为block）和.collapsing（当元素转换时）。上面的媒体查询利用了这些特性，并将折叠状态设置为“显示块”。但是，您还需要覆盖运行javascript时应用的内联高度样式，因此使用height:auto！在折叠和折叠状态中都很重要，这会导致忽略内联样式，以支持！重要规则

编辑

---

见下面的评论。如果发现内容未按预期显示，请尝试添加

visibility:visible

到上述媒体查询中的

.collapse

规则。

几乎完成了任务，文本内容由于一些奇怪的原因被隐藏。您能提供一些标记吗？一把小提琴，一个垃圾桶什么的？在我上面链接到的折叠内容下，似乎正在使用文档中的面板标记为我工作，我在过去成功地将此技术用于类似的事情。也许这与其他css冲突有关？在FF32、Safari 7.1和Chrome38（MacOSX）上，这似乎一直适用于我的终端。当然，它仍然可能是由特定的浏览器问题引起的。你在测试哪个浏览器？很奇怪。我制作了一个最简单的版本，看起来很有效：当我查看chrome inspector时，我看到

.collapse{display:none；visibility:hidden；}