Jak dodać kolumnę boczną do paska nawigacyjnego, gdy jest ona wyświetlana na mobilnym bootstrapie

Question

Mam witrynę przy użyciu funkcji ładowania początkowego. Ma pasek wyszukiwania u góry w pasku nawigacyjnym, który zwija się na urządzeniu mobilnym.

Poniżej paska nawigacyjnego mam 2 kolumny po lewej stronie wypełnione ok. 30 przyciskami radiowymi do wyboru niektórych filtrów wyszukiwania. Pozostałe 10 kolumn wyświetla wyniki wyszukiwania.

Na telefonie komórkowym użytkownik musi przewinąć w dół obok wszystkich kolumn, aby zobaczyć wyniki wyszukiwania. Jak mogę mieć przycisk "zwinąć w pasku nawigacyjnym", gdy witryna jest na urządzeniu mobilnym, tak aby przyciski opcji nie wyświetlały się, dopóki użytkownik nie kliknie ikony na pasku nawigacyjnym. (ikony na pasku nawigacyjnym to 3 linie poziome).

navbar:

... 
<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> 
    ... 

kolumny z lewej:

<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

dodając to do nagłówka

<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> 

Następnie zawijania zawartość na kolumnie z:

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

pozwala mieć przycisk, który będzie przełączać zawaleniem i uncollapsing kolumnę, na Just Mobile .

Answer 2

Można po prostu umieścić wszystko w klasie o nazwie 'okienko'. Jeśli sprawisz, że to okienko będzie tak wysokie, jak kolumny, które chcesz pokazać, przy pomocy overflow:hidden, możesz rozwinąć je za pomocą javascript, gdy użytkownik kliknie przycisk. Nie wiem, czy tego właśnie szukasz?