twitter-bootstrap - submenús - menu desplegable vertical html

¿Múltiples menús desplegables por grupo de botones?

Question

En este momento tengo esto saliendo en la interfaz:

Pero entre los botones con el bolt , plus-circle y el gear me gustaría ningún espacio. Tengo las lagunas allí porque parece que es obligatorio, según este comentario en los documentos de Bootstrap Components:

Use cualquier botón para activar un menú desplegable colocándolo dentro de un grupo .btn y proporcionando el marcado de menú adecuado.

Entonces, ahora la brecha está ahí porque los botones están distribuidos con un formato de:

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

¿Es posible tener más de un menú desplegable por grupo de botones?

Si es así, ¿cómo lo haría? Tal como está, parece que puedo colocar botones individuales antes que un menú desplegable, pero no múltiples menús desplegables.

Si pongo varios menús desplegables en el mismo grupo de botones, todos se disparan cuando se hace clic en uno.

Answer 1

Esto es posible, debe ajustar cada botón desplegable en otro div .btn-group (sin usar .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