如何水平并排显示React-Bootstrap卡片组件

Question

大家好，我正在尝试使用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>

- Kim San

---

你能分享CSS吗？没错，你正在使用Bootstrap，所以它们从那里获取。我知道了。 - ash

我还没有在我的CSS上写任何东西。 - Kim San

Answer 1

使用d-flex和flex-fill react bootstrap类很容易实现。这也可以满足您在一行中需要等高卡片的需求。

尝试下面的代码，可能会按照您的期望工作。

<Row lg={3}>
  {productList &&
    productList.map((product) => {
      const { id, title, price, category, description, image } =
        product;
      return (
        <Col className="d-flex">
          <Card className="flex-fill" 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>

- Aman

Answer 2

    <Row>
      {productList &&
        productList.map((product) => {
          const { id, title, price, category, description, image } =
            product;
          return (
            <Col className="col-6">
              <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>

- Saqib Javed Qureshi

---

高度怎么样？我希望每张卡片的高度都相同，因为某些产品可能有更长的描述。 - Kim San

为此，您必须在行组件上编写自定义类。 - Saqib Javed Qureshi