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

Posted 2023-03-24

【中文标题】可折叠的 div，但仅在移动设备上

【英文标题】：Collapsable div but only on mobile

【发布时间】：2014-07-07 15:05:17

【问题描述】：

我有一个仅在移动设备上显示的折叠/展开切换按钮（使用引导程序），但我也喜欢在移动设备上默认折叠 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>

【参考方案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。

【讨论】：

我认为这是正确的方向，但一个问题是，在按下按钮切换折叠状态后，我自己的 css 不会被引导程序覆盖以将 display:none 更改为 display:block