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