Multiple drop-down menus per button group?

drop-down-menu, twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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.

Original source