可折叠的 div，但仅在移动设备上

Question

我有一个仅在移动设备上显示的折叠/展开切换按钮（使用引导程序），但我也喜欢在移动设备上默认折叠 div。 我正在寻找仅在移动设备上折叠消息 div 的选项（默认情况下它是折叠的）

有什么方法可以让div 在移动设备上折叠但在桌面查看时展开？

<a class="btn btn-primary hidden-lg hidden-md" data-toggle="collapse" data-target="#messages">Recent Messages <i class="icon-caret-down"></i></a>

<div id="messages" class="collapse in">
<h5>My Messages ... </h5></div>

Answer 1

首先，您可能应该在按钮上使用 .visible-sm 或 .visible-xs 而不是 .hidden-lg .hidden-md，因为还有两个更大的尺寸（xl 和 xxl）。

http://getbootstrap.com/css/#responsive-utilities

其次，引导折叠只是打开和关闭 CSS 属性显示：无。因此，默认情况下将显示设置为无，然后将其设置为阻止中等和向上屏幕。

所以遵循移动优先的原则：

#messages {
    display: none;    
}

@media (min-width: @screen-md-min) {
    #messages {
        display: block;    
    }
}

如果您不使用 LESS，则应将变量 @screen-md-min 更改为 992px。