Question

我有新的反应，但我有很好的使用bootstrap的经验，并且在我有多次之前使用bootstrap做了一个ButtonGroup，其中按钮进入多行。现在我正在使用react，并尝试使用react-bootstrap做同样的事情，但它似乎不可能。这是我到目前为止所做的事情：

<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>

根据我的理解，这与使用bootstrap和html执行此操作的方式相对应，但它仍然显示所有垂直按钮，而不是按预期显示两行

编辑：

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

为了澄清更多，这两行属于同一组，因此一次只能选择两行中的一个选项。

Answer 1

您在ToggleButtonGroup组件中使用vertical，删除它和而不是使用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>

react-bootstrap中的多行ButtonGroup

1 个答案: