多行引导(无线电)按钮组

时间:2015-09-03 21:23:35

标签: twitter-bootstrap

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

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

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

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

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

2 个答案:

答案 0 :(得分:4)

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

希望这有帮助。

答案 1 :(得分:3)

这就是诀窍。

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>