如何让带额外工具栏字段的MudBlazor表格自适应不同屏幕？

针对你遇到的小屏设备工具栏覆盖表头、标题消失的问题，可通过结合MudBlazor响应式类和自定义CSS实现元素堆叠，具体步骤如下：

1. 重构工具栏布局结构 #

把ToolbarContent内的所有元素包裹在一个容器中，添加MudBlazor的Flex响应式类，让元素在空间不足时自动换行：

• d-flex: 启用Flex布局
• flex-wrap: 允许元素换行
• align-items-center: 垂直居中元素，避免布局偏移
• gap-2: 给元素间添加间距，提升可读性
• p-2: 增加内边距，防止元素挤到容器边缘

给表格标题添加flex-grow-1类，让它在大屏时占据剩余宽度，小屏时自动换行到单独一行，避免被搜索栏覆盖。

2. 极端小屏的自定义CSS适配 #

如果小屏仍有元素重叠问题，添加媒体查询强制元素宽度100%，确保每个元素单独成行：

@media (max-width: 576px) {
    .table-toolbar .mud-input-control {
        width: 100%;
    }
    .table-toolbar .mud-typography-h6 {
        width: 100%;
        text-align: left;
    }
}

给工具栏容器添加table-toolbar类，方便CSS定位。

完整可运行示例代码 #

<MudTable T="DataItem" Items="@sampleData">
    <ToolbarContent>
        <div class="table-toolbar d-flex flex-wrap align-items-center gap-2 p-2">
            <MudTypography Typo="Typo.h6" Class="flex-grow-1">用户数据列表</MudTypography>
            <MudTextField @bind-Value="@searchKeyword" Placeholder="搜索用户名..." Variant="Variant.Outlined" />
            <MudSelect @bind-Value="@selectedRole" Placeholder="筛选角色" Variant="Variant.Outlined">
                <MudSelectItem Value="Role.All">全部角色</MudSelectItem>
                <MudSelectItem Value="Role.Admin">管理员</MudSelectItem>
                <MudSelectItem Value="Role.User">普通用户</MudSelectItem>
            </MudSelect>
            <MudButton Color="Color.Primary">刷新数据</MudButton>
        </div>
    </ToolbarContent>
    <ColGroup>
        <col style="width: 30%" />
        <col style="width: 40%" />
        <col style="width: 30%" />
    </ColGroup>
    <HeaderContent>
        <MudTh>用户名</MudTh>
        <MudTh>邮箱</MudTh>
        <MudTh>角色</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Username</MudTd>
        <MudTd>@context.Email</MudTd>
        <MudTd>@context.Role.ToString()</MudTd>
    </RowTemplate>
</MudTable>

<style>
@media (max-width: 576px) {
    .table-toolbar .mud-input-control {
        width: 100%;
    }
    .table-toolbar .mud-typography-h6 {
        width: 100%;
        text-align: left;
    }
}
</style>

@code {
    private List<DataItem> sampleData = new();
    private string searchKeyword = "";
    private Role selectedRole = Role.All;

    public enum Role { All, Admin, User }

    public class DataItem
    {
        public string Username { get; set; }
        public string Email { get; set; }
        public Role Role { get; set; }
    }

    protected override void OnInitialized()
    {
        sampleData = Enumerable.Range(1, 8).Select(i => new DataItem
        {
            Username = $"user_{i}",
            Email = $"user{i}@example.com",
            Role = i % 3 == 0 ? Role.Admin : Role.User
        }).ToList();
    }
}

效果说明 #

• 大屏设备：标题、搜索栏、筛选器、按钮横向排列，布局紧凑合理
• 中屏设备：空间不足时，部分元素自动换行
• 小屏设备：所有元素垂直堆叠，标题单独一行，不会被覆盖，表头完整显示

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