Razor Pages页脚渲染区段遮挡正文按钮及局部视图布局异常问题

问题原因及修复方案 #

1. 页脚区段内容位置异常 #

你当前把@RenderSection("footer", required: false)定义在了footer标签内、container容器的上方，没有外层样式约束，同时区段内容会优先于版权信息渲染，就会出现截图里页脚内容跑到员工列表下方、版权信息上方的错位问题。
调整footer的RenderSection位置即可：

<footer class="border-top footer text-muted">
    <div class="container">
        @* 把区段渲染放到容器内，位置可以根据需要放在版权信息上方或者下方 *@
        @RenderSection("footer", required: false)
        &copy; 2021 - EmployeeBook - <a asp-area="" asp-page="/Privacy">Privacy</a>
    </div>
</footer>

2. 员工列表布局错乱 #

你在_Summary局部视图里误用了Bootstrap的modal-content类，这个类是模态框组件的专用样式，依赖父级modal、modal-dialog的定位、宽度规则，直接放在普通页面流中渲染时，默认样式不符合列表布局要求，多个同类块堆叠时没有栅格约束，自然会出现排版异常。

修复步骤 #

1. 重构_Summary局部视图，改用卡片类实现员工信息块：

@using EmployeeBook.Core
@model Employee

<div class="card mb-3">
    <div class="card-header">
        <h3>@Model.Name</h3>
    </div>
    <div class="card-body">
        <span>员工类型：@Model.TypeOfEmployee</span>
    </div>
    <div class="card-footer">
        <a class="btn btn-light"
           asp-page="./EmployeeDetails"
           asp-route-employeeId="@Model.Id">
            详情
        </a>
        <a class="btn btn-light"
           asp-page="./EditEmployee"
           asp-route-employeeId="@Model.Id">
            编辑
        </a>
        <a class="btn btn-danger"
           asp-page="./Delete"
           asp-route-employeeId="@Model.Id">
            删除
        </a>
    </div>
</div>

2. 给员工列表添加栅格布局约束，控制每行展示的卡片数量，比如每行2/3个卡片的配置：

<div class="row g-3 mt-3">
@foreach (var employee in Model.Employees)
{
    <div class="col-md-6 col-lg-4">
        <partial name="_Summary" model="employee" />
    </div>
}
</div>

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