如何为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>