如何仅在移动设备上折叠媒体查询上的 div（没有 javascript/只有 bootstrap 4）答案

【问题标题】：how to collapse div on media query for mobile only (without javascript / only bootstrap 4)如何仅在移动设备上折叠媒体查询上的 div（没有 javascript/只有 bootstrap 4）
【发布时间】：2018-07-15 19:14:50
【问题描述】：

关于引导程序 4：我试图仅在移动视图上折叠 .card div。我尝试了 .collapse 类，但以这种方式它会在所有尺寸的屏幕上折叠。如果有人想看，这是我的代码；

<div class="col-lg-3">
    <div class="card>
        <div class="card-header">
            <a data-toggle="collapse" data-target="#t10"><h3>Top 10</h3></a>
        </div>
        <div class="card-body collapse" id="t10">
            <div class="row ">
                <div class="col-md-12>
                <h4>ABC</h4>
                <h5>Review: <img src="../../images/4stars.png"><br></h5>
            </div>
        </div>
    </div>
</div>

花了几个小时在互联网上搜索后，我没有找到任何可能我使用了错误的搜索词（作为新手）的想法，我有一个扭转这种情况的想法，所以我在媒体查询中取消折叠 =>992px，代码如下：

@media (min-width: 992px) {
    #t10.collapse { display: block; }
}

如您所见，这没问题，但我真的很想学习当屏幕尺寸更改为小于 992 像素时折叠 div/card 的最佳方法。

（请原谅我的英语。我不会说英语）。

【问题讨论】：

你的 HTML 代码完全被破坏了。我建议你先解决这个问题。使用适当的代码编辑器自动突出显示无效代码。括号：brackets.io是一个非常适合初学者的编辑器。
我正在使用 Sublime Text。我会尝试渲染代码。谢谢你的建议。
然后开启 Sublime 中自动高亮无效代码的选项。在一个好的编辑器中，你不需要“渲染”任何东西。一个好的代码编辑器会在您输入无效代码时立即突出显示。
我已经下载了括号。例如，我编辑了帖子以改进代码。
该代码仍然完全损坏。创建一个新的 HTML 文件，即以 .html 结尾的文件，然后从上面粘贴您的代码 sn-p。你看到了什么？您是否看到代码完全损坏并以红色突出显示？

标签： html css twitter-bootstrap media collapse

【解决方案1】：

只需将 .dont-collapse-sm 类添加到您的可折叠 div 中，就不会在 768px 断点处消失。

感谢：https://codepen.io/glebkema/pen/xryaKK（也帮了我很多忙！）

@media (min-width: 768px) {
  .collapse.dont-collapse-sm {
    display: block;
    height: auto !important;
    visibility: visible;
  }
}

【讨论】：

【解决方案2】：

使用responsive display classes。

例如，

<div class="card-body d-none d-lg-flex" id="t10"></div>

将在屏幕宽度小于 992 像素的情况下隐藏此 DIV。

【讨论】：

感谢您的回复，但我想让它像导航折叠一样折叠并显示汉堡图标。小型设备用户将点击以显示其内容。
这是一个不同的问题。这与您出示的卡片无关。阅读导航上的文档或更新问题。
我阅读了提供隐藏实用程序的文档显示实用程序，这对我来说是另一个很好的信息。好的，在此评论之后，我将阅读导航文档以查看是否能够折叠卡片或导航以外的任何 div。

【解决方案3】：

Bootstrap 4 为响应式屏幕提供类。比如 col-lg-* col-sm-*

所以，您可以尝试使用引导类本身来更改显示。

例如

<div class="d-block d-sm-block d-md-flex d-lg-flex d-xl-flex">
  /** your content **/
</div>

此类将更改我们提到的每个屏幕的显示属性。

供您参考，请查看 Bootstrap 4 文档：Here

【讨论】：

感谢您的回复，但我想让它像导航折叠一样折叠并显示汉堡图标。小型设备用户将点击以显示其内容。
你能提供 Snippet JSfiddle 吗？ Bootstrap 4 会自动提供折叠功能。参考这个：getbootstrap.com/docs/4.0/components/navbar/#toggler