Kilka pogrupowanych przycisków z rzędu z Twitter Bootstrap 2.x

Question

Jest tam prosty sposób na uzyskanie przycisku dropdowns pogrupowanego jak button-groups z Twitter Bootstrap?

Ten kod

<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> 

Wynik

Answer 1

Rozwiązanie to miejsce rozwijana przycisk do grupowania przycisku.

Oto przykład: 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> 

Niektóre szczypie CSS:

.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; 
}