Bootstrap versteckt Rasterinhalte auf einem kleinen Bildschirm. Grid> Accordion

Question

Ich habe ein Responsive-Raster mit vier Spalten, das als Gitter (jede Zelle mit Titel und Inhalt) angezeigt wird, bis die Bildschirmgröße kleiner als 768 ist. In diesem Fall wird es zu einem Akkordeon und der gesamte Inhalt wird ausgeblendet Klickt auf den Titel des Elements. Ich habe es mit einigen jQuery arbeiten, um zu verstecken/zeigen mit der Kollapsmethode und Klasse.

http://codepen.io/anon/pen/VKOXJB - Top-grid

Das Problem ist, wird der Inhalt zu erhalten für kleine Bildschirme ich die navbar-collapse Klasse verwenden, musste sich zu verstecken. Dadurch wird ein unerwünschtes Trennzeichen eingefügt, aber was noch wichtiger ist, ich habe Bedenken, es für etwas anderes als ein Menü zu verwenden, da dies unbeabsichtigte Konsequenzen haben kann.

Also habe ich versucht, es mit meiner eigenen Klasse, hideifmobile, nachzuahmen, aber dies versteckt den Inhalt nicht, wenn Sie die Größe des Fensters unter 768px ändern. Siehe unteres Raster im Codepen.

Abgesehen davon, wenn jemand andere Kommentare re der Code hätte ich dankbar sein.

Answer 1

Sie machen die Hauptklasse display: der hideifmobile-Klasse, um die Einstellung unter Verwendung von !important in allen Szenarien zu erzwingen. Entfernen Sie die !important aus der display: Eigenschaft in hideifmobile Klasse und Ihr Problem gelöst werden :)

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