如何制作相同大小的卡片而不考虑 React Bootstrap 中的文本？答案

【问题标题】：How to make Cards of same size irrespective of the text in React Bootstrap?如何制作相同大小的卡片而不考虑 React Bootstrap 中的文本？
【发布时间】：2022-11-24 02:02:44
【问题描述】：

我正在尝试使用 React Bootstrap 在 Gatsby 中添加两张相同大小的卡片。但是，如果卡片文本或图像具有不同的尺寸，卡片的大小会有所不同。如何使较小的卡片与较大的卡片大小相同？我正在使用的基本代码：


<Row>
        <Col>
            <Card>
              <StaticImage
                src="../images/example1.svg"
                alt="banner image"
                placeholder="blurred"
                layout="fullWidth"
              />
              <Card.Body>
                <Card.Title>Example 1</Card.Title>
                <Card.Text>
                  <p className="text-muted">
                    This is example 1
                  </p>
                </Card.Text>
              </Card.Body>
            </Card>
        </Col>

        <Col>
            <Card>
              <StaticImage
                src="../images/example2.svg"
                alt="banner image"
                placeholder="blurred"
                layout="constrained"
              />
              <Card.Body>
                <Card.Title>Example2</Card.Title>
                <Card.Text>
                  <p className="text-muted">
                    THis is example 2
                  </p>
                </Card.Text>
              </Card.Body>
            </Card>
        </Col>
</Row>

我已经阅读了 React Bootstrap 网站上的 Card 文档，但那里没有介绍。

【问题讨论】：

标签： gatsby react-bootstrap

【解决方案1】：

您可以将 d-flex 和 align-items-stretch 添加到 col 组件中。您可以在此处查看其他参考资料：How to make Bootstrap 4 cards the same height in card-columns? 我希望这对你有帮助

【讨论】：