如何使用 Col 显示 Bootstrap 卡片列表？

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

希望我的理解是正确的：您想要响应式布局，在大屏幕上每行显示更多产品，在小屏幕上每行显示更少产品。

如果这是您想要的，那么您在映射时应该return像这样：

<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}代表大型设备

如何使用 Col 显示 Bootstrap 卡片列表？

How to display list of Bootstrap Cards using Col?

react-bootstrap

bootstrap-4