En este momento tengo esto saliendo en la interfaz:

Pero entre los botones con elbolt, plus-circle ygear No me gustaría ninguna brecha. 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, en este momento la brecha está ahí porque los botones están dispuestos 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 haría eso? Tal como está, parece que puedo colocar botones individuales delante de un menú desplegable, pero no múltiples menús desplegables.

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