Multiple grouped dropdown buttons in a row with Twitter Bootstrap 2.x

Question

Is this an easy way to get button dropdowns grouped as button groups with twitter boot block?

This code

<div class="btn-toolbar"> <div class="btn-group"> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> January <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" class="active">January</a></li> <li><a href="#">February</a></li> <!-- ... --> </ul> </div> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 2012 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" rel="2012" class="active">2012</a></li> <li><a href="#" rel="2011">2011</a></li> <li><a href="#" rel="2010">2010</a></li> <li><a href="#" rel="2009">2009</a></li> </ul> </div> </div> 

Result

Answer 1

The solution is a drop-down menu button with a grouped button.

Here is an example: http://jsfiddle.net/RayZ/CgBTn/49/

  <div class="btn-group"> <!-- group container for buttons merging --> <div class="btn btn-group"> <!-- button and dropdown group in one --> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> One <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">foo</a></li> </ul> </div> <div class="btn btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Two <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">foo</a></li> </ul> </div> </div> 

Some CSS settings:

 .btn-group.btn { border: 0; padding: 0; } .btn-group.btn > .btn { border-radius: 0 } .btn-group.btn > .dropdown-menu { text-align: left; } .btn-group.btn:first-child > .btn { -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .btn-group.btn:last-child > .btn { -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; }