引导在小屏幕上隐藏网格内容。网格 > 手风琴

Question

我有一个四列响应式网格，它显示为一个网格（每个单元格都有一个标题和内容），直到屏幕尺寸小于 768，在这种情况下它变成一个手风琴，并且所有内容都被隐藏，除非单击项目的标题。我让它与一些 jquery 一起使用折叠方法和类来隐藏/显示。

http://codepen.io/anon/pen/VKOXJB - 顶部网格

问题是，要在小屏幕上隐藏内容，我必须使用 navbar-collapse 类。这是插入一个不需要的分隔符，但更重要的是，我对将它用于菜单以外的东西感到不安，因为它可能会产生意想不到的后果。

所以我尝试用我自己的课程hideifmobile 来模仿它，但是当您将窗口大小调整到 768 像素以下时，这并没有隐藏内容。请参阅 codepen 中的底部网格。

除此之外，如果有人有任何其他 cmets re 代码，我将不胜感激。

Answer 1

您正在制作主要的 hideifmobile 类 display: 属性以在所有情况下使用 !important 强制设置。从 hideifmobile 类中的display: 属性中删除!important，您的问题将得到解决:)

   .hideifmobile {
        display: block;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }