如何实现响应式Bootstrap Grid与Razor虚拟化的兼容适配？

方案1：基于Bootstrap显示类的双布局切换 #

这就是你考虑的思路，完全可行，核心是根据视口断点分别渲染两套独立的虚拟化布局：

• 桌面端（断点以上）：使用多列网格的虚拟化组件，保持原有的分组展示
• 移动端（断点以下）：改用单列布局，甚至可以扁平化数据结构，让每行高度稳定

示例代码：

<!-- 桌面端多列虚拟化 -->
<div class="d-none d-md-block">
    <Virtualize Items="@GroupedItems" Context="group">
        <div class="row mb-3">
            @foreach (var item in group.Items)
            {
                <div class="col-md-4">
                    <div class="card">@item.Content</div>
                </div>
            }
        </div>
    </Virtualize>
</div>

<!-- 移动端单列虚拟化 -->
<div class="d-block d-md-none">
    <Virtualize Items="@FlatItems" Context="item">
        <div class="col-12 mb-3">
            <div class="card">@item.Content</div>
        </div>
    </Virtualize>
</div>

后端只需准备好分组和扁平化的两个数据源即可，Bootstrap的d-none d-md-block和d-block d-md-none会自动根据视口宽度切换显示。

方案2：强制网格不换行（适合特定场景） #

如果必须在小视口保持多列布局，可以给Bootstrap的row添加flex-nowrap类，让列不换行，配合overflow-auto实现横向滚动，这样每行高度不会因换行变化，虚拟化就能正常工作：

<div class="row flex-nowrap overflow-auto">
    <Virtualize Items="@Items" Context="item">
        <div class="col-md-4 col-6">
            <div class="card">@item.Content</div>
        </div>
    </Virtualize>
</div>

注意：这种方式会带来横向滚动条，需评估是否符合产品的用户体验要求。

方案3：动态计算虚拟化行高 #

通过JavaScript监听窗口 resize 事件，实时计算当前布局下的行高，传递给Razor Virtualize组件的ItemHeight参数，让虚拟化功能始终获取准确的元素高度：

1. 组件后端代码：

private int? _currentItemHeight;
private IJSObjectReference? _jsModule;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./scripts/virtualize-resize.js");
        await _jsModule.InvokeVoidAsync("setupResizeListener", DotNetObjectReference.Create(this));
    }
}

[JSInvokable]
public void UpdateItemHeight(int height)
{
    _currentItemHeight = height;
    StateHasChanged();
}

public async ValueTask DisposeAsync()
{
    if (_jsModule != null)
    {
        await _jsModule.DisposeAsync();
    }
}

2. 新建wwwroot/scripts/virtualize-resize.js：

export function setupResizeListener(dotNetRef) {
    const updateHeight = () => {
        const sampleItem = document.querySelector('.virtual-row-item');
        if (sampleItem) {
            dotNetRef.invokeMethodAsync('UpdateItemHeight', sampleItem.offsetHeight);
        }
    };

    updateHeight();
    window.addEventListener('resize', updateHeight);
}

3. 前端虚拟化组件：

<Virtualize Items="@GroupedItems" Context="group" ItemHeight="@_currentItemHeight">
    <div class="row virtual-row-item mb-3">
        <div class="col-md-4 col-6">
            <div class="card">@group.Item1.Content</div>
        </div>
        <div class="col-md-4 col-6">
            <div class="card">@group.Item2.Content</div>
        </div>
        <div class="col-md-4 col-6">
            <div class="card">@group.Item3.Content</div>
        </div>
    </div>
</Virtualize>

这种方案无需切换布局，能自适应所有视口大小，但需要额外的JS交互逻辑。

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