如何对齐反应引导卡答案

【问题标题】：How to align react Boostrap cards如何对齐反应引导卡
【发布时间】：2022-02-04 05:13:13
【问题描述】：

我的卡片带有不同的图像和文本，使它们变大/变小，我找不到任何 React-Bootstrap 特定的答案，但是我尝试的每个 css 和正常的 Bootstrap 替代方案都不起作用。唯一解决问题的方法是在卡片中设置最大高度，但是具有较大图像或文本的卡片仍然具有更高或更低的图像，并且对于具有一些中等大小图像的行和一个较大的一个。例如：

我尝试调整此答案的前三个答案：Link，但它不起作用，例如使用 d-flex align-items-stretch

import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const Flexbox = (props) => {
  return (
    <Container>
      <Row>
        <Col className="d-flex align-items-stretch">
          <Product product={props.productList[0]}></Product>
        </Col>
        <Col className="d-flex align-items-stretch">
          <Product product={props.productList[1]}></Product>
        </Col>
        <Col className="d-flex align-items-stretch">
          <Product product={props.productList[2]}></Product>
        </Col>
      </Row>
    </Container>
  );
};

export default Flexbox;

结果是每张卡片都有自己的大小。

使用 h-100 没有任何变化，容器代码：

import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const Flexbox = (props) => {
  return (
    <Container fluid className="content-row">
      <Row>
        <Col>
          <Product product={props.productList[0]}></Product>
        </Col>
        <Col>
          <Product product={props.productList[1]}></Product>
        </Col>
        <Col>
          <Product product={props.productList[2]}></Product>
        </Col>
      </Row>
    </Container>
  );
};

export default Flexbox;

卡号：

import React from "react";
import "../App.css";
import "../stylesheets/product.css";
import Rating from "./rating";
import Card from "react-bootstrap/Card";

const Product = (props) => {
  console.log(props.product);
  return (
    <div>
      <Card className="card rounded shadow-sm border-0 h-100">
        <Card.Body className="card-body p-4">
          <img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
        </Card.Body>
        <Card.Footer>
          <h5>{props.product.name}</h5>
          <Rating></Rating>
        </Card.Footer>
      </Card>
    </div>
  );
};

export default Product;

并且使用 d.flex 和 flex-fill 也没有任何变化，容器：

import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const Flexbox = (props) => {
  return (
    <Container fluid>
      <Row>
        <Col className="col-sm d-flex">
          <Product product={props.productList[0]}></Product>
        </Col>
        <Col className="col-sm d-flex">
          <Product product={props.productList[1]}></Product>
        </Col>
        <Col className="col-sm d-flex">
          <Product product={props.productList[2]}></Product>
        </Col>
      </Row>
    </Container>
  );
};

export default Flexbox;

卡片：

import React from "react";
import "../App.css";
import "../stylesheets/product.css";
import Rating from "./rating";
import Card from "react-bootstrap/Card";

const Product = (props) => {
  console.log(props.product);
  return (
    <div>
      <Card className="card rounded shadow-sm border-0">
        <Card.Body className="p-4 flex-fill">
          <img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
        </Card.Body>
        <Card.Footer>
          <h5>{props.product.name}</h5>
          <Rating></Rating>
        </Card.Footer>
      </Card>
    </div>
  );
};

export default Product;

我正在失去理智，我不知道该怎么办，我尝试了一切，但没有任何改变。

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

我认为如果你移除卡片周围的 div 并将 h-100 作为一个类添加回来，它应该对齐：

const Product = (props) => {
  console.log(props.product);
  return (
      <Card className="card rounded shadow-sm border-0 h-100">
        <Card.Body className="p-4 flex-fill">
          <img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
        </Card.Body>
        <Card.Footer>
          <h5>{props.product.name}</h5>
          <Rating></Rating>
        </Card.Footer>
      </Card>
  );
};

export default Product;

【讨论】：