ट्विटर बूटस्ट्रैप 2.x

Question

के साथ एक पंक्ति में एकाधिक समूहित ड्रॉपडाउन बटन ट्विटर पर बूटस्ट्रैप के साथ button-groups जैसे समूह dropdowns प्राप्त करने का एक आसान तरीका है?

इस कोड

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

परिणाम

Answer 1

समाधान वर्गीकृत किया बटन में जगह ड्रॉप-डाउन बटन है। 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> 

कुछ सीएसएस तोड़ मरोड़:

यहाँ एक उदाहरण है

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