Как добавить метки в btn-group-vertical?

Question

Я создал очень простые радиокнопки, используя "btn-group-vertical".

<div class="btn-group btn-group-vertical" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"><span class="fa fa-lock"></span> Private
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"><span class="fa fa-unlock"></span> Public
    </label>
</div>

Но я не смог найти простой способ добавить ярлык справа от каждой кнопки (как со стандартными переключателями).

Answer 1

Я не думаю, что ты можешь. btn-group и btn-group-vertical связывают определенную группу элементов для построения структуры (вертикальная кнопка). Добавление дополнительных HTML-элементов нарушит эту структуру.

Я думаю, что поиск альтернативы будет лучшим для вас. Рассмотрите возможность использования всплывающих подсказок ( http://getbootstrap.com/javascript/).

<div class="btn-group btn-group-vertical" data-toggle="buttons">
    <label data-toggle="tooltip" data-placement="right" data-container="body" title="tooltip on first input!" class="btn btn-primary">
        <input  type="radio" name="options" id="option1"><span class="fa fa-lock"></span> Private
    </label>
    <label data-toggle="tooltip" data-placement="right" data-container="body" title="tooltip on second input!" class="btn btn-primary">
        <input  type="radio" name="options" id="option2"><span class="fa fa-unlock"></span> Public
    </label>
</div>