Multiple drop-down menus per button group?

Question

Right now I have this coming out on the interface:

But between the buttons with the bolt, plus-circle and gear I would like no gap. I have the gaps there because it seems like it is mandatory, per this comment in the Bootstrap Components docs:

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

So, right now the gap is there because the buttons are laid out with a format of:

<div class="btn-toolbar" role="toolbar">     <div class="btn-group btn-group-sm">         <button type="button" title="Focusing" ... >             <span class='fa fa-bolt '></span>         </button>     </div>     <div class="btn-group btn-group-sm">         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">             <span class='fa fa-plus-circle '></span>             <span class='fa fa-caret-down '></span>         </button>         <ul class="dropdown-menu" role="menu">             ...         </ul>     </div>     <div class="btn-group btn-group-sm">         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">             <span class='fa fa-gear '></span>             <span class='fa fa-caret-down '></span>         </button>         <ul class="dropdown-menu" role="menu">             ...         </ul>     </div> </div> 

---

Is it possible to have more than one drop-down per button group?

If so, how would I do that? As it stands, it seems like I can place individual buttons ahead of a drop-down menu, but not multiple drop-down menus.

If I put multiple drop-down menus in the same button group, they all fire when one is clicked.

Answer 1

This is possible, you must wrap each dropdown button in another .btn-group div (without using .btn-toolbar) :

<div class="btn-group">    <button type="button" class="btn btn-default">     <i class="glyphicon glyphicon-flash"></i>   </button>    <div class="btn-group">     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">       <i class="glyphicon glyphicon-plus-sign"></i> <span class="caret"></span>     </button>     <ul class="dropdown-menu" role="menu">       <li><a href="#">Action</a></li>       <li><a href="#">Another action</a></li>       <li><a href="#">Something else here</a></li>       <li class="divider"></li>       <li><a href="#">Separated link</a></li>     </ul>   </div>    <div class="btn-group">     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">       <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>     </button>     <ul class="dropdown-menu" role="menu">       <li><a href="#">Action</a></li>       <li><a href="#">Another action</a></li>       <li><a href="#">Something else here</a></li>       <li class="divider"></li>       <li><a href="#">Separated link</a></li>     </ul>   </div>  </div> 

Bootply

Documentation