Bootstrap 4.6 带内置row结构的卡片footer无法对齐底部如何修复

问题根因 #

你为了适配移动端水平布局新增的内部row/col结构，打断了Bootstrap卡片自带的flex垂直布局逻辑：card-header、card-body、card-footer被包裹在内部的col容器中，该容器未撑满父级高度，也未启用flex垂直排布，因此card-body无法自动填充剩余空间，导致footer无法对齐到卡片底部。

具体修改步骤 #

你只需要给三个元素新增Bootstrap原生工具类即可，无需修改现有结构、无需自定义CSS：

• 给外层.card元素添加d-flex flex-column类，保证卡片本身为垂直flex布局，撑满父级列的高度
• 给包裹card-header、card-body、card-footer的.col-8.col-md-12元素添加d-flex flex-column h-100类，让该容器撑满所在行的高度，同时自身为垂直flex布局
• 给该容器内的.card-body元素添加flex-grow-1类，让卡片主体自动填充剩余垂直空间，将footer挤压到容器底部

修改后的核心代码片段 #

<div class="row no-gutters">
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex">
        <!-- 新增d-flex flex-column到card -->
        <div class="card m-1 d-flex flex-column">
            <div class="row no-gutters ">
                <div class="col-4 col-md-12">
                    <a href="@Url.Action("Advert", "Browse" , new { id=Model.Id })">
                        <img src="@imageUrl" class="img-fluid advert-card-img" alt="@Model.Title">
                    </a>
                </div>
                <!-- 新增d-flex flex-column h-100到该col -->
                <div class="col-8 col-md-12 d-flex flex-column h-100">
                    <div class="card-header">
                        <div class="text-truncate text-secondary">@Model.GroupName</div>
                        <div class="text-truncate">@Model.CategoryName</div>
                    </div>
                    <!-- 新增flex-grow-1到card-body -->
                    <div class="card-body flex-grow-1">
                        <div class="advert-card-price text-primary">@Model.Price.ToMoneyString()<sup class="advert-card-currency">€</sup></div>
                        @Html.ActionLink(Model.Title, "Advert", "Browse", new { id = Model.Id }, new { @class = "advert-card-title" })
                    </div>
                    <div class="card-footer">
                        @if (Model.AccountSummary.IsBusiness)
                        {
                            <span class="badge badge-dark">Business</span>
                        }
                        <div class="text-secondary">
                            @Html.ActionLink(Model.AccountSummary.AccountName, "Profile", "Browse", new { id = Model.AccountSummary.AccountAliasId ?? Model.AccountSummary.AccountId, aid = Model.AccountSummary.AccountAliasId.HasValue }, new { @class = "text-truncate" })
                            <div class="text-truncate text-secondary">@Model.AccountSummary.CityName</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 其他卡片结构做相同修改即可 -->
</div>

该方案同时兼容桌面端和移动端布局：桌面端下卡片垂直排布时footer固定在底部，移动端下卡片水平排布时footer也会对齐到右侧内容区域的底部，不会破坏你原本的布局逻辑。

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