Прямо сейчас у меня это выходит на интерфейс:

Но между кнопками с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>

Можно ли иметь более одного раскрывающегося списка на группу кнопок?

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

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