如何使用Col显示引导卡列表?

Question

我目前正在使用react-bootstrap来迭代数组以显示卡片。我希望这些卡片在不同的屏幕尺寸上都能响应。被映射的数组。

<div>
{filteredProductsList.map((product) => {
return (
<Col key={product._id}>
<ProductCard product={product} />
</Col>
);
})}
</div>

这里是ProductCard组件

<Card className="product-card col-md-4">
<Card.Img className="product-img" variant="top" src={product.image} />
<Card.Body>
<Card.Title>{product.title}</Card.Title>
<Card.Text>{product.description}</Card.Text>
</Card.Body>
</Card>

当前以指定宽度为4的单列显示卡片。

Answer 1

我希望我理解对了:你想有一个响应式布局，在大屏幕上每一行有更多的产品，在小屏幕上每一行有更少的产品。

如果这是你想要的，那么你应该在映射时返回这样的东西:

<Container>
<Row xs={2} md={4} lg={6}>
{filteredProductsList.map(product => {
return (
<Col key={product._id}>
<ProductCard product={product} />
</Col>
);
})}
</Row>
</Container>;

xs={2}代表超小型设备md={4}代表介质设备lg={6}代表大型设备