Question

我有一个包含多个项目的按钮组，这些项目必须像单选按钮一样。我还需要它们分成几行并跨越容器的整个宽度。

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

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

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

有没有办法获得一个多行按钮组而不用javascript一起攻击无线电行为？

Answer 1

而不是为两组<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>。

希望这有帮助。

Answer 2

这就是诀窍。

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>

多行引导（无线电）按钮组

2 个答案: