水平堆叠 react-bootstrap 手风琴

Question

我们有一些需要呈现为手风琴的类别组的要求，它应该如下所示；

在扩展上，它需要扩展自己并显示身体。 我们创建了单独的组件，它将接受字符串数组和一些辅助函数，但所有这些手风琴在父组件上呈现为垂直

 import { ListGroup, ListGroupItem } from "react-bootstrap"; import { generateUniqueComponentKey } from "../../utils/Helper"; const RenderButtonGroup = ({btnGroups, handleFilterGroupClick, selectedFilterGroup}) => { console.log('selectedFilterGroup ', selectedFilterGroup) const renderBtgGroup = () => { if (btnGroups){ let btnItems = btnGroups && btnGroups.map(item => { let myKey = generateUniqueComponentKey(); return ( <> <ListGroupItem eventKey={myKey} key={myKey} variant="warning" onClick={handleFilterGroupClick} active={selectedFilterGroup[0] === item? true: false} >{item}</ListGroupItem> </> ) }) return( <ListGroup>{btnItems}</ListGroup> ) } } return ( <div className="d-flex"> {renderBtgGroup()} </div> ) } export default RenderButtonGroup;

不是 CSS 专家所以不知道如何实现这一点。 提前致谢

Answer 1

使用具有 3 列的网格组件： https://react-bootstrap.github.io/layout/grid/