Cardbox 并排内容在数据库中获取

Question

从 'react-bootstrap' 导入 { Card, Button , Row, Col}； 从'react-router-dom'导入{链接};

导出默认函数 ProductCard({productProp}) {

const { _id, name, description, price } = productProp;

return (    

    <Row lg={3}>

        <Col  className="d-flex">   
            <Card style={{ width: '18rem' }} className="flex-fill">
                <Card.Body>
                    <Card.Title>{name}</Card.Title>
                    <Card.Subtitle>Description:</Card.Subtitle>
                    <Card.Text>{description}</Card.Text>
                    <Card.Subtitle>Price:</Card.Subtitle>
                    <Card.Text>Php {price}</Card.Text>
                    <Button as={Link} variant="primary" to={`/products/${_id}`}>Details</Button>
                </Card.Body>
            </Card> 

        </Col>      
    </Row>
    
)

}

大家好，我在并排设计时确实遇到了问题，因为我的数据是在数据库中获取的，如何将我的所有数据排成一行？因为它们垂直对齐

我想学习如何编辑那些