时间戳

首页 > 解决方案 > Bootstrap v4.5 使卡片大小相同

html - Bootstrap v4.5 使卡片大小相同

问题描述

首先，如果某个地方已经有答案，我很抱歉。如果是这样，请向我指出那个方向。我一直在寻找一段时间，似乎无法找到符合我需要的答案。

我试图让我的heroku 页面上的所有引导卡都具有相同的大小。我将它与围绕响应式 div 的容器一起设置为 display flex 和 justify-content-center 和 align-items-center。我也尝试过 align-items-stretch 但它仍然不会导致卡片的高度相同。我还尝试在行内的响应式 div 上使用引导高度实用程序 (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>

标签： htmlcssbootstrap-4

解决方案

您可以添加以下 css 类：

.card {
  height: 200px
}

这将使您所有的卡片具有相同的高度。您可以将高度更改为您喜欢的任何值。

推荐阅读