如何将标签添加到 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/#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>