在多列中反应 Bootstrap 卡片结果

Question

下面是我的代码，我的问题是，结果像这样一个一个地显示在底部：

1
2
3

我想把每个输出结果显示如下？作为 3 列

1        2        3
4        5        so on...... 

我已经使用 https://react-bootstrap.github.io/components/cards/ 组件来显示数据库输出

{Mylist.length && Mylist.map((item, index) => {
                                    return (                                    
                                        <Card key={index} style={{ width: '18rem' }}>
                                            <Card.Body>  
                                                <Card.Subtitle className="mb-2 text-muted">{moment(item.date_time).format('LLL')}</Card.Subtitle>                                 
                                                <Card.Text>{item.content}</Card.Text>
                                                <Button variant="danger" size="sm" data-id={item.id} onClick={() => remove(item.id)} >Delete</Button>{' '}                                            
                                            </Card.Body>
                                            </Card>
                                    )
                                })} 

Answer 1

尝试以下方法，查看更多信息 https://react-bootstrap.netlify.app/components/cards/#card-groups

  <Row xs={1} md={2} className="g-3">
        {Mylist.length && Mylist.map((item, index) => {
                                            return (
                                              <Col key={index}>
                                                <Card style={{ width: '18rem' }}>
                                                    <Card.Body>  
                                                        <Card.Subtitle className="mb-2 text-muted">{moment(item.date_time).format('LLL')}</Card.Subtitle>                                 
                                                        <Card.Text>{item.content}</Card.Text>
                                                        <Button variant="danger" size="sm" data-id={item.id} onClick={() => remove(item.id)} >Delete</Button>{' '}                                            
                                                    </Card.Body>
                                                    </Card>
                                                  </Col>
                                            )
                                        })} 
        </Row>