Mobil önyüklemede görüntülendiğinde navona bir yan sütun nasıl eklenir

Question

Bootstrap kullanarak bir sitem var. Mobilde iken çöken bir navbarın üst kısmında bir arama çubuğu vardır.

Navbarın altında solda, belirli arama filtrelerini seçmek için yaklaşık 30 radyo düğmesiyle dolu 2 sütun var. Diğer 10 sütun arama sonuçlarını gösterir.

Mobilde, arama sonuçlarını görmek için kullanıcının tüm sütunları geride bırakması gerekir. Site mobilde iken radyo düğmesinin 'navbar'a daraltılması' bölümüne nasıl sahip olabilirim, böylece radyo düğmeleri kullanıcı navbar simgesini tıklayana kadar gösterilmez. (navbar simgeleri 3 yatay çizgi).

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

sol sütunlar:

<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

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

Sonra ile sütun üzerinde içeriğini sarma başlığının içine bu ekleme .

Answer 2

Sadece 'bölme' adlı bir sınıfta her şeyi yerleştirmek olabilir. Bu bölmeyi, göstermek istediğiniz sütunlar kadar yüksekse, overflow:hidden ile, kullanıcı düğmeyi tıkladığında javascript ile genişletebilirsiniz. Aradığın şey bu mu, bilmiyorum?

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

biri sadece mobil cihazlarda, çöken ve sütun uncollapsing geçiş sağlayacak bir düğme olmasını sağlar: