twitter-bootstrap - 如何向 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 绑定(bind)特定的一组元素来构造一个结构(垂直按钮)。添加额外的 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>