如何实现Bootstrap卡片内容不均时所有卡片自动等高对齐

现有代码的核心问题 #

• 卡片组外层容器没有配置flex等高拉伸规则，所有卡片默认按自身内容高度渲染，无法自动对齐到内容最长的卡片高度
• 卡片和外层包裹层之间没有打通flex布局链路，就算外层设置了拉伸规则，卡片本身也不会自动撑满可用高度
• 短内容卡片的文本没有配置垂直居中规则，就算高度拉齐，内容也会顶在卡片顶部，不符合预期

具体调整步骤 #

全程使用Bootstrap 4内置的flex类实现，不需要额外编写自定义CSS：

• 给卡片组外层容器（即带有slick-swipe v-align-center-slick-contents类的元素）添加d-flex align-items-stretch类，让容器内所有直接子元素自动拉伸到和容器内最高元素一致的高度
• 给每个卡片的外层包裹div（即带有mr-3 p-2类的元素）添加d-flex类，让包裹层成为flex容器，为内部卡片提供高度拉伸的链路
• 给每个卡片根元素添加w-100类，让卡片完全占满外层flex容器的宽度，避免出现宽度塌陷问题
• 给每个卡片的card-body元素添加d-flex flex-column justify-content-center类，让卡身内容区成为纵向flex布局，内部文本自动在可用高度内垂直居中

调整后完整代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h1 class="text-center mb-5">Our other packages</h1>
    <div class="slick-swipe v-align-center-slick-contents d-flex align-items-stretch">
        <div class="mr-3 p-2 d-flex">
            <div class="card text-center level-4 bg-1 w-100">
                <div class="border-top-thick"></div>
                <div class="card-body d-flex flex-column justify-content-center">
                    <h6>Bigger Content Big Big</h6>
                </div>
            </div>
        </div>
        
        <div class="mr-3 p-2 d-flex">
            <div class="card text-center level-4 bg-2 w-100">
                <div class="border-top-thick"></div>
                <div class="card-body d-flex flex-column justify-content-center">
                    <h6>Gold</h6>
                </div>
            </div>
        </div>
        
        <div class="mr-3 p-2 d-flex">
            <div class="card text-center level-4 bg-3 w-100">
                <div class="border-top-thick"></div>
                <div class="card-body d-flex flex-column justify-content-center">
                    <h6>Thee</h6>
                </div>
            </div>
        </div>

        <div class="mr-3 p-2 d-flex">
            <div class="card text-center level-4 bg-4 w-100">
                <div class="border-top-thick"></div>
                <div class="card-body d-flex flex-column justify-content-center">
                    <h6>Diamond</h6>
                </div>
            </div>
        </div>

        <div class="mr-3 p-2 d-flex">
            <div class="card text-center level-4 bg-5 w-100"> 
                <div class="border-top-thick"></div>
                <div class="card-body d-flex flex-column justify-content-center">
                    <h6>More Packages</h6>
                </div>
            </div>
        </div>
    </div>
</div>

特殊场景注意事项 #

• 方案不需要手动给卡片设置固定高度，完全依赖flex的自动拉伸规则适配后端返回的动态长短内容，只要某一张卡片内容更长，其余卡片会自动同步到对应高度
• 如果使用了slick轮播组件，需要在初始化配置中设置adaptiveHeight: false，避免slick的自适应高度规则覆盖flex布局的等高效果

内容的提问来源于stack exchange，提问作者krish111