如何水平并排显示 react-bootstrap 卡组件答案

【问题标题】：How to display react-bootstrap card component side by side horizontally如何水平并排显示 react-bootstrap 卡组件
【发布时间】：2022-02-19 03:22:06
【问题描述】：

大家好，我正在尝试使用 react-bootstrap 创建一些电子商务网络应用程序。我想使用引导程序中的 Card 组件来映射我的项目。我设法显示每张卡片，但我不能让它们水平并排显示。我希望每行有 4/5 个项目，有人知道我该如何完成吗？这是我的代码：

产品.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>

【问题讨论】：

你能分享 CSS 吗？是的，你正在使用 Bootstrap，所以它们是从那里获取的。我明白了。
我的css上什么都没写，

标签： css reactjs react-bootstrap

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

身高怎么样？我希望每张卡片都具有相同的高度，因为某些产品可能有更长的描述
为此，您必须在 Row 组件上编写一个自定义类。