Javascript react引导中的多行按钮组

我是个新手，但我对引导有很好的经验，在使用引导之前，我曾多次做过按钮组，按钮进入多行。 现在我正在使用react，并尝试使用react引导程序做同样的事情，但这似乎是不可能的。这是我目前正在做的事情：

<ToggleButtonGroup vertical type="radio" name ="options">
  <ButtonGroup justified> 
   <ToggleButton>1</ToggleButton>
   <ToggleButton>2</ToggleButton>
  </ButtonGroup>
  <ButtonGroup justified>
   <ToggleButton>3</ToggleButton>
   <ToggleButton>4</ToggleButton>
  </ButtonGroup>
</ToggleButtonGroup>

1.
2.
3.
4.

据我所知，这相当于使用引导和html的方式，但它仍然以垂直方式显示所有按钮，而不是按预期的两行显示

编辑：

以下是我正在寻找的一个例子：

---

为了进一步说明，这两行属于同一组，因此一次只能从这两行中选择一个选项。

如果您在ToggleButtongGroup组件中使用垂直，请删除该选项，然后 不要使用ButtonGroup，而应该使用ToggleButtonGroup，要在单独的行上渲染这两个组，应该像工具栏一样将它们包装起来

  <ButtonToolbar>
    <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
      <ToggleButton value={1}>Radio 1</ToggleButton>
      <ToggleButton value={2}>Radio 2</ToggleButton>
      <ToggleButton value={3}>Radio 3</ToggleButton>
      <br/>
      <ToggleButton value={4}>Radio 4</ToggleButton>     
      <ToggleButton value={5}>Radio 5</ToggleButton>
      <ToggleButton value={6}>Radio 6</ToggleButton>
    </ToggleButtonGroup>
  </ButtonToolbar>

第一台
第二台
第三台


第四台
第五台
第六台

你能给我一个你拥有的和你期望的屏幕截图吗？这不是我真正想要的，我希望同一个按钮组被分成两行，而不是显示在一行中，并且两个按钮都需要在同一组中，所以可以在所有按钮上进行切换。