文章/答案/技术大牛

发布

社区首页 >问答首页 >反应引导中的多行ButtonGroup

问反应引导中的多行ButtonGroup
EN

Stack Overflow用户

提问于 2018-05-30 16:07:33

回答 1查看 1.4K关注 0票数 0

我是新的反应，但我有良好的经验引导，并使用引导之前，多次，做了一个ButtonGroup，按钮进入多行。现在我正在使用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>

据我理解，这与引导和html的方式相对应，但它仍然显示垂直的所有按钮，而不是按预期在两行中显示。

编辑：

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

为了更清楚地说明，这两行属于同一组，因此只能同时从两行中选择一个选项。

javascript

reactjs

frontend

react-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-30 16:29:14

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50609179

复制

相似问题

问反应引导中的多行ButtonGroup
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应引导中的多行ButtonGroupEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应引导中的多行ButtonGroup
EN