如何让Blazor QuickGrid分页器宽度与网格保持一致？

方法一：将网格与分页器包裹在统一容器中 #

把<QuickGrid>和<Paginator>放在同一个容器内，通过控制容器的宽度让两者保持尺寸一致，同时可借助样式实现居中：

<div style="display: inline-block;">
    <QuickGrid ItemsProvider="UserStoryProvider"  Pagination="_PaginationState">
        <PropertyColumn Property="@(p => p.PracticeAreaName)" Sortable="true" IsDefaultSort="SortDirection.Ascending" />
        <PropertyColumn Property="@(p => p.StateName)" Sortable="true"  />
        <PropertyColumn Property="@(c => c.UserStory)" Sortable="true" />
        <PropertyColumn Property="@(p => p.IsCaseWithAnotherAttorney)" Sortable="true" Title="Assinged?" />
        <PropertyColumn Property="@(p => p.DateOfIncident)" Sortable="true" Format="dd MMM yyyy" />
        <TemplateColumn Title="Action" Align="Align.Center">
            <ChildContent Context="templateContext">
                <button type="button" class="btn btn-primary ms-2 mt-1" @onclick="@(()=> EditUserStory(templateContext.UserStoryID_PK))">view</button>
            </ChildContent>
        </TemplateColumn>
    </QuickGrid>

    <Paginator Value="@_PaginationState"></Paginator>
</div>

display: inline-block会让容器自适应内部网格的宽度，分页器自然会和网格保持一致。

方法二：直接为分页器添加匹配样式 #

通过CSS限制分页器的宽度，并让它和网格对齐：

内联样式写法 #

<Paginator Value="@_PaginationState" style="width: inherit; margin: 0 auto;"></Paginator>

全局CSS写法 #

在wwwroot/css/site.css中添加样式：

.quickgrid-paginator {
    width: inherit;
    margin: 0 auto;
}

然后给分页器绑定类：

<Paginator Value="@_PaginationState" class="quickgrid-paginator"></Paginator>

方法三：利用组件默认样式匹配 #

QuickGrid渲染后会带有blazor-quickgrid类，可通过CSS选择器让分页器继承它的宽度：

.blazor-quickgrid + .paginator {
    width: 100%;
    max-width: inherit;
}

若分页器默认类名不是paginator，可通过浏览器开发者工具查看实际类名后调整选择器。

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