Bootstrap Collapse sidebar menu to dropdown

Question

У меня есть левая боковая панель с вертикальным меню, созданная с помощью «nav nav-pills nav-stacked», что я хочу, когда размер экрана XS (мобильный), это меню меняется на подходящее выпадающее меню и начинается как закрытый/разрушился.

Вот мой исходный код:

http://www.bootply.com/zOy2IJumZO

HTML-код здесь также

<div class="container-fluid"> 
    <div class="row"> 

    <div class="col-xs-12 col-sm-3"> 

     <div class="panel panel-info"> 
      <div class="panel-heading">Categories <span class="badge pull-right">12345</span></div> 
      <ul id="categories-menu" class="nav nav-pills nav-stacked"> 
       <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li> 
       <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li> 
       <li id="cid-10"><a href="community">Community</a></li> 
       <li id="cid-2"><a href="electronics">Electronics</a></li> 
       <li id="cid-11"><a href="events">Events</a></li> 
       <li id="cid-12"><a href="fashion">Fashion</a></li> 
       <li id="cid-13"><a href="freebies">Freebies</a></li> 
      </ul>    
     </div> 

     <div class="panel panel-primary"> 
      <div class="panel-heading">Site statistics</div> 
      <ul class="list-unstyled"> 
       <li>1000 Users</li> 
       <li>200 Online</li> 
       <li>300 Hidden</li> 
      </ul> 
     </div> 

    </div> 

    <div class="col-xs-12 col-sm-9"> 
     This is the right content column<br> 
     This is the right content column<br> 
     This is the right content column<br> 
     This is the right content column<br> 
     This is the right content column<br> 
     This is the right content column<br> 
     This is the right content column<br> 
    </div> 

    </div> 
</div> 

Answer 1

Оберните ул с самозагрузки класса коллапс:

<div class="collapse navbar-collapse" id="collapse"> 
    <ul id="categories-menu" class="nav nav-pills nav-stacked"> 
     <li id="cid-1"><a href="automotive-vehicles">Automotive Vehicles</a></li> 
     <li id="cid-8"><a href="business-to-business">Business-to-Business</a></li> 
     <li id="cid-10"><a href="community">Community</a></li> 
     <li id="cid-2"><a href="electronics">Electronics</a></li> 
     <li id="cid-11"><a href="events">Events</a></li> 
     <li id="cid-12"><a href="fashion">Fashion</a></li> 
     <li id="cid-13"><a href="freebies">Freebies</a></li> 
    </ul> 
</div> 

Затем добавить данных- toggle и data-target к элементу, который вы хотите переключить в меню. Например, значок 12345 в вашем коде:

<span data-toggle="collapse" data-target="#collapse" class="badge pull-right">