Несколько выпадающих меню для каждой группы кнопок?

Сейчас у меня это появляется на интерфейсе:

Но между кнопками с bolt, plus-circle и gear мне не нужен пробел. У меня есть пробелы, потому что кажется, что это обязательно, за этот комментарий в Документах Bootstrap Components:

Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в .btn-группу и обеспечив надлежащую разметку меню.

Итак, сейчас пробел существует, потому что кнопки выложены с форматом:

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

---

Возможно ли иметь несколько выпадающих групп для каждой кнопки?

Если да, как бы я это сделал? Как бы то ни было, кажется, что я могу разместить отдельные кнопки перед выпадающим меню, но не с несколькими раскрывающимися меню.

Если я помещаю несколько выпадающих меню в одну и ту же группу кнопок, все они запускаются при нажатии.