twitter bootstrap - botones - cómo agregar etiquetas a btn-group-vertical?

input bootstrap

Question

Creé unos botones de radio muy simples usando "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>

Pero no pude encontrar una forma sencilla de agregar una etiqueta a la derecha de cada botón (como con los botones de opción estándar).

Answer 1

No creo que puedas. btn-group y btn-group-vertical enlazan un grupo específico de elementos para construir una estructura (botón vertical). Agregar elementos html adicionales romperá esta estructura.

Creo que encontrar una alternativa será lo mejor para ti. Considere usar tooltips ( http://getbootstrap.com/javascript/#tooltips ).

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