如何崩溃的移动媒体查询DIV只（不使用Javascript /只引导4）

Question

关于引导4：我试图瓦解只移动视图.card股利。我试图.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; }
}

正如你可以看到它是确定的，但我真的想学折叠DIV /卡的最佳途径时，屏幕尺寸的变化小于992px。

（请原谅我的英语，我不是工程扬声器）。

Answer 1

只需添加.dont崩溃-SM级到你的可折叠的div没有消失过768px断点。

学分：https://codepen.io/glebkema/pen/xryaKK（也帮了我很多！）

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

Answer 2

使用responsive display classes。

例如，

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

将隐藏这个DIV屏幕上宽度小于992px。

Answer 3

系统启动时进行响应屏幕4提供类。像COL-LG- * COL-SM-*

所以，你可以尝试使用引导类本身改变显示。

EG

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

该班将改变显示属性我们提到的每一个画面。

供您参考，检查引导4文档：Here