ASP.NET MVC中Bootstrap卡片小屏无法垂直堆叠的问题求助

问题核心 #

当前卡片在桌面端水平排列正常，但移动端/小屏设备仍保持水平布局，无法自动垂直堆叠。尝试card-deck、col d-flex justify-content-center均无效，其他场景card-deck能正常工作。

问题根源 #

1. Bootstrap版本冲突：开发环境引入了Bootstrap 3.4.1，生产环境却用Bootstrap 5.3，两个版本的组件逻辑差异极大——card-deck在Bootstrap 3中没有响应式堆叠特性，这是核心失效原因。
2. Viewport元标签格式错误：原标签缺少逗号分隔参数，导致移动端响应式逻辑无法触发：

   <!-- 错误写法 -->
   <meta name="viewport" content="width=device-width initial-scale=1" />
   

分步解决方案 #

1. 统一Bootstrap版本

删除开发环境中Bootstrap 3的引用，和生产环境保持一致使用Bootstrap 5.x，修改Layout.cshtml的开发环境代码块：

<environment include="Development">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
            crossorigin="anonymous"></script>
</environment>

2. 修复Viewport元标签

修正参数分隔符，确保移动端响应式生效：

<meta name="viewport" content="width=device-width, initial-scale=1" />

3. 替换card-deck为Bootstrap 5响应式布局

Bootstrap 5已弃用card-deck，改用网格系统+卡片组件实现自适应布局，修改Index.cshtml的卡片容器代码：

@model IEnumerable<Employee>

@{ 
    ViewBag.Title = "Employee List";
}

<div class="row g-4">
    @foreach (var employee in Model)
    {
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                <div class="card-header">
                    <h3>@employee.Name</h3>
                </div>
                <img class="card-img-top" src="~/images/noimage.jpg"
                     asp-append-version="true" />
                <div class="card-footer text-center">
                    <a asp-controller="home" asp-action="details" asp-route-id="@employee.Id"
                       class="btn btn-primary m-1">View</a>
                    <a href="#" class="btn btn-primary m-1">Edit</a>
                    <a href="#" class="btn btn-danger m-1">Delete</a>
                </div>
            </div>
        </div>
    }
</div>

效果说明 #

修改后布局会自动适配不同屏幕：

• 桌面端（≥768px）：每行3张卡片
• 平板端（≥576px）：每行2张卡片
• 移动端（<576px）：自动垂直堆叠，每行1张卡片

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