柱高 bootstrap 的大小相等答案

【问题标题】：equal sizing of column height bootstrap柱高 bootstrap 的大小相等
【发布时间】：2020-02-01 10:24:53
【问题描述】：

我使用 Bootstrap 创建了一个 React Social Card 组件。我希望所有卡片的大小相同。但是，第一张卡的渲染比其他两张大得多。我曾尝试操纵 CSS 来解决此问题，但不幸的是，我是 Bootstrap 的新手，但没有成功。我还尝试将这个项目从我存储的 Github 存储库中导出到 Codesandbox，以便更轻松地帮助我找到解决方案。我在那里收到此错误：导入 GitHub 存储库时出错：找不到 package.json。

无论如何，有人知道这个问题的解决方案吗？下面，我将分享一个截图来说明问题以及相关组件和 CSS 文件的代码。这是 Github 存储库的链接：https://github.com/jevoncochran/React-Social-Card

这是卡片组件：

import React, { Component } from "react";
import Card from "./CardUI";

import img1 from "../assets/me-telice-pelo.jpg";
import img2 from "../assets/me-pernambues.jpg";
import img3 from "../assets/me-lucas-walking-pernambues.jpg";

class Cards extends Component {

    render() {
        return (
            <div className="container-fluid d-flex justify-content-center">
                <div className="row">
                    <div className="col-md-4">
                        <Card imgsrc={img1} title="Convergeance" />
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img2} title="Continuation" />
                    </div>
                    <div className="col-md-4">
                        <Card imgsrc={img3} title="Conspiracy" />
                    </div>
                </div>
            </div>
        );
    }
}

export default Cards;

这里是 CSS 代码：

body {
    background: radial-gradient(#e5e5e5, #ffff, #e5e5e5);
}

.card {
    width: 20rem;
}

.card:hover {
    box-shadow: 5px 10px 20px 1px rgba(0,0,0,0.253) !important;
}

.card-body {
    padding: 3rem 0 !important;
}

.card-text {
    font-size: 0.9rem;
    padding: 0.4rem 1.9rem;
}

.container-fluid .row {
    padding: 6rem;
}

.overflow { 
    overflow: hidden;
}

.card-img-top {
    transform: scale(1);
    transition: transform 0.5s ease;
}

.card-img-top:hover {
    transform: scale(1.4);
}

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案1】：

所以，我想出了一个解决方案。我不确定这是最好的解决方案。但我确定问题在于第一个图像比其他两个图像大。在我的 CSS 中，我只是将所有图像的最大高度设置为最后两个的高度（211.938px）。

【讨论】：