大家好,我正在尝试使用React-Bootstrap创建一些电子商务Web应用程序。我想通过使用Bootstrap的Card组件来映射我的商品。我成功地显示了每张卡片,但我无法使它们水平并排显示。我希望每行有4/5个项目,请问我该如何实现?以下是我的代码:
Product.js
<Row>
<Col lg={4}>
{productList && productList.map(product =>{
const {id, title, price, category,description,image} = product;
return(
<>
<Card key={id} className="productlist">
<Card.Img variant="top" src={"#"} />
<Card.Body>
<Card.Title>{title}</Card.Title>
<Card.Text>{description}</Card.Text>
<Card.Text>{category}</Card.Text>
<Card.Text>
{price}
</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>
</>
)
})}
</Col>
</Row>