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>
Comments
Post a Comment