javascript - Bootstrap3 two dropdowns on the same line -


i'm trying make 2 bootstrap3 dropdown element working on same line:

i've tried this:

 <div class="btn-group btn-block">     <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first         <span class="caret"></span>     </button>     <ul class="dropdown-menu btn-block">         <li><a href="#">reason 1</a></li>         <li><a href="#">reason 2</a></li>         <li><a href="#">reason 3</a></li>     </ul>       <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second         <span class="caret"></span>     </button>     <ul class="dropdown-menu btn-block">         <li><a href="#">reason 5</a></li>         <li><a href="#">reason 6</a></li>         <li><a href="#">reason 7</a></li>     </ul>    </div> 

unfortunately seems 2 dropdowns share same ul list (only second one). how can bind first dropdown ul list , second 1 own ul list too?

you need separate dropdowns in 2 btn-group:

<div class="btn-group btn-group-inline">   <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first     <span class="caret"></span>   </button>   <ul class="dropdown-menu btn-block">     <li><a href="#">reason 1</a></li>     <li><a href="#">reason 2</a></li>     <li><a href="#">reason 3</a></li>   </ul> </div>  <div class="btn-group btn-group-inline">   <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second     <span class="caret"></span>   </button>   <ul class="dropdown-menu btn-block">     <li><a href="#">reason 5</a></li>     <li><a href="#">reason 6</a></li>     <li><a href="#">reason 7</a></li>   </ul> </div> 

jsfiddle-link


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

java.lang.NoClassDefFoundError When Creating New Android Project -

Decoding a Python 2 `tempfile` with python-future -