Nhiều nút thả xuống được nhóm trong một hàng với Twitter Bootstrap 2.x

Question

Có cách nào dễ dàng để nhận được nút dropdowns được nhóm như button-groups bằng Twitter Bootstrap?

Mã này

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

quả

Answer 1

Solution là nơi nút thả xuống vào nút nhóm.

Dưới đây là một ví dụ: 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> 

Một số tinh chỉnh 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; 
}