多行中的引导（单选）按钮组

Question

我有一个按钮组，其中包含几个必须充当单选按钮的项目。我还需要将它们分成几行并跨越容器的整个宽度。

为此，我使用了引导程序的类btn-group-justified，并将<input type="radio"> 元素拆分为几个按钮组，同时保持相同的名称。

这看起来不错，但是按钮的副作用是不会切换其他组中的选中元素，即使它们具有相同的name。也就是说，它们不再表现为同一组中的单选按钮。

Jsfiddle here. 如您所见，如果您在第一行选择一个按钮，然后在第二行单击一个按钮，则第一个元素不会关闭。

有没有一种方法可以获得多行按钮组，而无需使用 javascript 破解无线电行为？

Answer 1

这成功了。

http://www.bootply.com/k067OmtNXt

<div data-toggle="buttons">
    <div class="btn-group btn-group-justified">
        <label class="btn btn-default">
            <input type="radio"> Lorem
        </label>
    </div>
    <div class="btn-group btn-group-justified">
        <label class="btn btn-default">
            <input type="radio"> ipsum
        </label>
    </div>
</div>

Answer 2

而不是这两个组<div class="btn-group btn-group-sm btn-group-justified" role="group" data-toggle="buttons"> 只是把它放在顶部，但没有 btn-group-justified。然后对于这两个组只需执行<div class="btn-group-justified"> ... your buttons here ...</div>。

希望这会有所帮助。