Comprimi div/elemento su schermi mobili solo con bootstrap. Esempio foto

Question

È possibile comprimere una barra laterale div - only su cellulari - usando bootstrap? Come potrei fare qualcosa come l'esempio nell'immagine? In modo che su un cellulare la barra laterale crolla e quando si fa clic, si espande. Non capisco come le domande dei media mi permettano di farlo a causa del jquery coinvolto.

http://i46.tinypic.com/2mzxflu.jpg

visto alcune domande simili su qui ma niente esattamente come questo. Qualcuno potrebbe spiegarmi o almeno indicarmi la giusta direzione? Grazie in anticipo.

Answer 1

Un modo rapido e sporco: sarebbe quello di scrivere il codice per la barra laterale di dimensioni complete che si desidera mostrare sugli schermi del desktop e il markup separato per la barra laterale compressa da mostrare sui dispositivi mobili.

Quindi per scegliere quando visualizzare la versione della barra laterale utilizzare classes provided by bootstrap per nascondere e mostrare il contenuto in base alle query multimediali.

barra laterale Collapsed: .hidden-desktop .hidden-tablet .visible-phone

barra laterale completa: hidden-phone .visible-tablet .visible-desktop

Answer 2

Ho avuto lo stesso problema con Bootstrap V3. Ho seguito il tutorial sulla documentazione ufficiale, ma non sono riuscito a far collassare la sidebar per impostazione predefinita sui dispositivi mobili.

Questo errore deriva dai file di origine Bootstrap V3 (versione personalizzata generata il 2013/09/05). Basta caricare il seguente CSS a destra dopo il bootstrap.css originale:

.collapse{display:none}.collapse.in{display:block}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease} 
@media screen and (min-width:768px){.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}} 

(questi stili provengono da una precedente versione della fonte Bootstrap V3 originale).

In caso contrario, il mio unico errore era inizializzare il plug-in di compressione nella mia pagina HTML. Quindi, se hai qualcosa di simile nel codice sorgente HTML:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.collapse').collapse(); 
    }); 
</script> 

... poi basta rimuoverlo e il plug-in crollo funzionerà come un fascino.

Answer 3

ho finito per imbattersi in questo problema e ha aggiunto una classe CSS per esso:

.collapse-non-md { 
    height: 0; 
    display: none; 
} 
.collapse-non-md.collapsing { 
    display: block; 
} 

@media (min-width: 992px) { 
    .collapse-non-md { 
     height: auto; 
     display: block; 
    } 
} 

Poi ho impostato la classe dell'elemento che volevo crollato sugli schermi sotto medio collapse-non-md e voilà, è crollato sulle piccole browser e aperti su quelli medi. Può ancora essere aperto e chiuso in modo normale (la classe .in ha la precedenza su .collapse-non-md).