ASP.NET MVC5中Bootstrap CSS异常致表单并排显示求助

问题背景 #

ASP.NET MVC项目里用Bootstrap CSS时，表单本该垂直左对齐，现在却并排显示；尝试Visual Studio 22修复、CTRL+F5刷新或热重载后，CSS仅部分生效。

核心问题排查与修复 #

1. 版本兼容性修正（Bootstrap 4/5适配） #

原代码使用了Bootstrap 3的form-horizontal类，该类在Bootstrap 4及以上版本已被废弃，直接导致布局失效。替换为Bootstrap 4+支持的结构：

@model BankSystem.Models.transfer

@{
    ViewBag.Title = "Transfer";
    Layout = "~/Views/Shared/_bankLayout.cshtml";
}

@if (ViewBag.text != null)
{
    <div style="color: #008000">@ViewBag.text</div>
}

<h2>Transfer</h2>

@using (Html.BeginForm("Transfer", "Home", FormMethod.Post))
{
    <div class="container mt-3">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group mb-3">
                    @Html.Label("Account Number", new { @class = "col-form-label" })
                    @Html.TextBoxFor(x => x.AccountNumber, new { @class = "form-control" })
                </div>
                <div class="form-group mb-3">
                    @Html.Label("CUSIP", new { @class = "col-form-label" })
                    @Html.TextBoxFor(x => x.CUSIP, new { @class = "form-control" })
                </div>
                <div class="form-group mb-3">
                    @Html.Label("Account Holder", new { @class = "col-form-label" })
                    @Html.TextBoxFor(x => x.AccountHolder, new { @class = "form-control" })
                </div>
                <div class="form-group mb-3">
                    @Html.Label("Amount", new { @class = "col-form-label" })
                    @Html.TextBoxFor(x => x.Amount, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <input type="submit" value="Send" class="btn btn-primary me-2" />
                    <a href="@Url.Action("Transfer", "Home")" class="btn btn-default">Cancel</a>
                </div>
            </div>
        </div>
    </div>
}

2. 验证Bootstrap引用有效性 #

打开_bankLayout.cshtml，确认CSS引用路径、版本正确：

• Bootstrap 5引用示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

• Bootstrap 4引用示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />

本地文件引用需确保文件存在于指定目录，无路径拼写错误。

3. 强制清除缓存 #

• 浏览器端按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，绕过缓存加载最新样式。
• Visual Studio端执行Build > Clean Solution，再重新生成项目后启动。

4. 排查自定义样式冲突 #

检查项目中自定义CSS是否覆盖了Bootstrap表单样式，比如设置display: inline-block、浮动属性等导致元素并排，调整自定义样式优先级或移除冲突规则。

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