小さな画面にグリッドの内容を隠しているブートストラップ。 Grid> Accordion

Question

私はグリッド（タイトルと内容を持つ各セル）が画面サイズが768未満になるまで表示する4列の応答グリッドを持っています。この場合、アコーディオンになり、すべてのコンテンツは非表示になりますアイテムのタイトルをクリックします。私はいくつかのjqueryを使って、折りたたみメソッドとクラスを使って非表示にする/表示するようにしました。

http://codepen.io/anon/pen/VKOXJB - トップグリッド

問題は、私はnavbar-collapseクラスを使用していた小さな画面のために非表示にするには、コンテンツを取得すること、です。これは不要なセパレータを挿入していますが、もっと重要なのは、意図しない結果が生じる可能性があるため、メニュー以外のものに使用するのは不安です。

私はそれ自身のクラスhideifmobileで模倣しようとしましたが、768px以下のウィンドウのサイズを変更してもコンテンツが隠れているわけではありません。 codepenの下のグリッドを参照してください。

他にも他のコメントがありましたらコードに感謝します。

Answer 1

メインのhideifmobileクラスdisplay:プロパティは、すべてのシナリオで!importantを使用して設定を適用します。 hideifmobileクラスのdisplay:プロパティから!importantを削除し、あなたの問題が解決されます:)

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