Question

首先，很抱歉，如果某个地方已经对此有一个答案。如果是这样，请将我指向该方向。我已经寻找了一段时间，但似乎找不到适合我需要的答案。

我正在尝试使heroku page上的所有引导卡大小相同。我将响应div周围的容器设置为display flex和justify-content-center和align-items-center。我也尝试过align-items-stretch，但仍然不会导致所有卡片的高度相同。我还尝试在行内的响应div上使用bootstrap height实用程序（h-100）。还使用了css min-height，但是遇到了问题，因为在调整窗口大小时内容会溢出div。

这是我目前所拥有的，最终会根据内容使用不同尺寸的卡片：

<div class='home-container m-5'>
    <div class="row d-flex mb-5 justify-content-center align-items-center">
        <div class="col-sm-6 col-lg-4">
            <a href='./Multi-welders'>
                <div class='card m-3 bg-light'>
                    <img src="./images/Home/Multi_Welder2.png" alt="ESAB Rebel EMP215IC welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">Best Multiprocess Welders</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-4">
            <a href='./helmets'>
                <div class='card m-3 bg-light'>
                    <img src="./images/Home/Safety_Equipment2.png" alt="Black welding helmet with red flames" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">Best Welding Helmets</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-4 h-100">
            <a href='./gloves'>
                <div class='card m-3 bg-light'>
                    <img src="./images/Home/Welding_Gloves.png" alt="Generic pair of leather welding gloves" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">Best Welding Gloves</h2>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="card m-3 bg-light">
                <img src="./images/Home/MIG_Welder.png" alt="MIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
                <div class="card-body text-center">
                    <div class="ribbon ribbon-top-left"><span>Coming Soon</span>
                    </div>                  
                        <h2 class="card-title coming-soon">Best MIG Welders</h2>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class='card m-3 bg-light'>
                <img src="./images/Home/Tig Welder2.png" alt="TIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
                <div class="card-body text-center">
                    <div class="ribbon ribbon-top-left"><span>Coming Soon</span>
                       </div>
                    <h2 class="card-title coming-soon">Best TIG Welders</h2>
                </div>
            </div>
        </div>
        <div class='col-sm-6 col-lg-4'>
            <div class='card m-3 bg-light'>
                <img src="./images/Home/Multi_Welder.png" alt="Professional Welder" class="card-img-top p-3 pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
                <div class="card-body text-center">
                    <div class="ribbon ribbon-top-left"><span>Coming Soon</span>
                    </div>
                    <h2 class="card-title coming-soon">Best Professional Welders</h2>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以添加以下CSS类：

.card {
  height: 200px
}

这将使您所有的卡都具有相同的高度。您可以将高度更改为任意值。

Bootstrap v4.5使卡片大小相同

1 个答案: