升级Bootstrap 5后表单水平布局失效问题求助

核心原因 #

Bootstrap 5彻底移除了form-horizontal类，原Bootstrap 4依赖该类实现的水平表单逻辑被替换为网格系统+表单控件专属类的组合方式，旧写法直接失效。

快速修复方案（最小改动适配） #

不需要逐个重构表单，只需针对现有结构做两处关键调整：

1. 为表单行添加垂直对齐类 #

给原有的row标签加上align-items-center，确保标签和输入控件垂直居中对齐，避免排版错位。

2. 替换标签样式类 #

将原有的control-label替换为Bootstrap 5的col-form-label，该类专门适配网格布局下的表单标签样式。

修改后的登录表单代码 #

<div class="container">
    <form asp-action="Test" asp-controller="Home" method="post">
        <!-- 新增align-items-center，替换control-label为col-form-label -->
        <div class="row align-items-center">
            <label for="email" class="col-form-label col-sm-2">Email</label>
            <input asp-for="Email" type="email" id="email" class="form-control col-sm-6" />
        </div>
        <div class="row align-items-center">
            <label for="password" class="col-form-label col-sm-2">Password</label>
            <input asp-for="Password" type="password" class="form-control col-sm-2" />
        </div>
        <div class="row align-items-center">
            <label class="col-form-label col-sm-2">Remember Me</label>
            @Html.CheckBoxFor(modelItem => Model.RememberMe, new { @class = "col-sm-1" })
        </div>
        <div class="MyButtonContainer">
            <div class="text-center">
                <button type="submit" asp-action="Logon" asp-controller="Home" class="btn btn-primary">Logon</button>
            </div>
        </div>
    </form>
</div>

批量优化建议（减少重复改动） #

如果项目中表单数量多，可以在site.css中添加全局兼容样式，无需修改每个表单的HTML：

/* 兼容旧版control-label类 */
.control-label {
    @extend .col-form-label;
}

/* 给表单内所有行自动添加垂直对齐和间距 */
form .row {
    align-items: center;
    margin-bottom: 1rem; /* 可选：匹配Bootstrap默认表单行间距 */
}

额外注意事项 #

• Bootstrap 5的bootstrap.bundle.min.js已包含Popper，无需额外引入；若项目无其他jQuery依赖，可移除单独引入的jQuery文件。
• 原代码中container, text-center的逗号是语法错误，类名之间需用空格分隔，应改为container text-center。

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