可折叠div但仅限移动设备

Question

我有一个仅在移动设备上显示的折叠/展开切换按钮（使用引导程序），但Id也喜欢在移动设备上默认折叠的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属性display：none上打开和关闭。因此，默认情况下将display设置为none，然后将其设置为block以用于中屏和上屏。

因此首先遵循移动原则：

#messages {
    display: none;    
}

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

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