Bootstrap（单选）按钮组跨多行显示

Question

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

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

这看起来很好，但是会导致按钮不在其他组中切换已选元素，即使它们具有相同的name。也就是说，它们停止在同一组中作为单选按钮工作。 Jsfiddle here. 如您所见，如果您选择第一行上的一个按钮，然后再单击第二行上的一个按钮，则第一个元素不会被切换关闭。

有没有一种方法可以获得多行按钮组，而无需使用javascript来混合单选按钮的行为？

- Mariano

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>

- Ilya Kozhevnikov

Answer 2

不要将这个东西应用于两个组，而是只在顶部使用它，但不要使用btn-group-justified。 然后对于这两个组，只需使用

…在此放置您的按钮…

。

希望这可以帮到你。

- rby

---

谢谢，做了那个并且将 data-toggle 上移也起作用了。 - Mariano

亲爱的同行们，你们能提供一个可行的例子吗？我一直在尝试实现同样的功能但没有成功。非常感谢！ - Victor

恐怕为时已晚，我已经用另一种方式解决了这个问题......代码与Mariano在他的帖子中给出的示例非常相似。我只是想要在两行中拥有属于同一组的单选按钮。但我无法实现它而不破坏CSS样式。（我能够实现这一点，但按钮的CSS样式是单选按钮和按钮的混合体，因此可视化效果很差） - Victor

有没有想过如何使用react-bootstrap实现这个？试着将ButtonGroups和ToggleButtonGroups组合在一起，但是不起作用。 - loknar