如何将标签添加到 btn-group-vertical？

Posted 2023-03-05

【中文标题】如何将标签添加到 btn-group-vertical？

【英文标题】：how to add labels to btn-group-vertical?

【发布时间】：2014-01-03 14:46:49

【问题描述】：

我使用“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>

但我找不到一种简单的方法来在每个按钮的右侧添加一些标签（就像使用标准单选按钮一样）。

【问题讨论】：

您能否更具体地说明您要实现的目标？

我想为每个按钮/状态添加更多解释

【参考方案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>

【讨论】：

谢谢，但这不是我喜欢的设计，我认为最好让 UX 看到更多细节，而不需要悬停。