使用Bootstrap实现卡片底部按钮对齐的问题求助

问题 #

我用PHP生成商品卡片，想要把底部的「Bieden」按钮对齐到卡片底部。已经做了这些设置：

• 给card-body添加d-flex和flex-column类
• 给按钮加了mt-auto类
• 用带text-center的div包裹表单

但按钮还是没对齐到底部，代码和效果如下：

原代码

return '
        <div class="col">
            <div class="card detailpage-related-items" style="width: 100%;">
                <div class="card-body d-flex flex-column p-4 card-detailpage" style="width: 100%;"><img class="d-flex recommended-products-thumbnail" src="https://iproject1.ip.aimsites.nl/pics/' . $afbeelding . '">
                    <h4 class="card-title">' . $voorwerpnaam . '</h4>
                    <h5 class="card-title"><strong>€' . $prijs . '</strong></h5>
                    <p>Loopt tot: ' . $eindtijd . '</p>
                    <div class="text-center">
                        <form action="/detail.php" method="get">
                            <input type="hidden" name="veiling" id="veiling" value="' . $voorwerpnummer . '">
                            <input type="submit" class="bid-button mt-auto" value="Bieden">
                        </form> 
                    </div>
                </div>
            </div>
        </div>
    ';

当前效果

解决方法 #

问题出在mt-auto加错了位置：card-body是flex容器，mt-auto需要作用在容器的直接子元素上才能生效。现在按钮是表单的子元素，表单又在text-center的div里，这个div才是card-body的直接子元素，所以应该把mt-auto加到这个div上，同时可以去掉按钮上的mt-auto。

修改后的代码

return '
    <div class="col">
        <div class="card detailpage-related-items" style="width: 100%;">
            <div class="card-body d-flex flex-column p-4 card-detailpage" style="width: 100%;">
                <img class="d-flex recommended-products-thumbnail" src="https://iproject1.ip.aimsites.nl/pics/' . $afbeelding . '">
                <h4 class="card-title">' . $voorwerpnaam . '</h4>
                <h5 class="card-title"><strong>€' . $prijs . '</strong></h5>
                <p>Loopt tot: ' . $eindtijd . '</p>
                <!-- 给这个div添加mt-auto -->
                <div class="text-center mt-auto">
                    <form action="/detail.php" method="get">
                        <input type="hidden" name="veiling" id="veiling" value="' . $voorwerpnummer . '">
                        <input type="submit" class="bid-button" value="Bieden">
                    </form> 
                </div>
            </div>
        </div>
    </div>
';

原理

card-body设置为flex-column后，内部元素会垂直排列。给包裹表单的div加上mt-auto，这个div会自动把上方的剩余空间占满，从而被推到卡片底部，同时text-center保证按钮在div内居中显示，最终实现按钮对齐卡片底部的效果。

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