Come aggiungere una colonna laterale alla barra di navigazione quando è visualizzata sul bootstrap mobile

Question

Ho un sito che utilizza bootstrap. Ha una barra di ricerca in alto in una barra di navigazione che collassa quando sul cellulare.

Sotto la barra di navigazione ho 2 colonne a sinistra che sono riempite con circa 30 pulsanti di opzione per la scelta di determinati filtri di ricerca. Le altre 10 colonne mostrano i risultati della ricerca.

Su dispositivo mobile, l'utente deve scorrere verso il basso tutte le colonne per visualizzare i risultati della ricerca. Come posso avere il pulsante radio "collassare nella barra di navigazione" quando il sito è su cellulare in modo che i pulsanti di opzione non vengano visualizzati finché l'utente non fa clic sull'icona della barra di navigazione. (le icone della barra di navigazione sono le 3 linee orizzontali).

barra di navigazione:

... 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <form class="navbar-form navbar-left" action="search.php" method="post"> 
    <div class="form-group"> 
     <input type="text" class="form-control" name="search_title" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Search</button> 
    ... 

colonne di sinistra:

<div class="row"> 
    <div class="col-sm-2"> 
     <p class="filter-heading" >Site</p> 
     <label for="aa-site"> 
      <input class="site-radio" type="radio" name="store" value="every-site" id="aa-site" checked> All</label></br> 
     <label for="bb-site"> 
      <input class="site-radio" type="radio" name="store" value="wallapop" id="bb-site"> Wallapop</label></br> 

    ... 
    </div> 

    </form> 
    <div class="col-sm-10"> 
    <div class="panel-body center"> 
... 

Answer 1

aggiungendo questo nell'intestazione

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

Poi avvolgendo il contenuto sulla colonna con:

<div class="col-sm-2"> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    ... 
    </div> 
</div> 

permette di avere un pulsante che si alterna collasso e uncollapsing della colonna, a solo cellulare .

Answer 2

si può semplicemente mettere tutto in una classe denominata 'pane'. Se si rende questo riquadro alto quanto le colonne che si desidera mostrare, con uno overflow:hidden, è possibile espanderlo con javascript quando l'utente fa clic sul pulsante. Non so se è quello che stai cercando?