MudBlazor：如何在 MAUI Blazor 混合应用程序中对齐左/拉伸 MudStack（MudContainer）项目

Question

我正在使用 .NET8 MAUI Blazor 混合应用程序中的 MudBlazor 组件准备自定义表单的大纲。使用时 https://try.mudblazor.com/snippet/QOmoaXYXJzLgAEtS

<h3>Test Outline</h3>

<MudPaper Outlined="true" Spacing ="1" 
        Style="background-color:aquamarine;padding:10px 10px 10px 10px;">
    <MudStack 
            Elevation="1" Row="false"
            Style="background-color:moccasin;padding:10px 10px 10px 10px;align-items:stretch"
            Outlined="true">
    <MudContainer Gutters="false" Outlined="true" Height="50px">
        <MudGrid Spacing="1" Elevation="1">
        <MudItem>  
            <MudPaper Outlined="true">Section 1</MudPaper>
        </MudItem>
        <MudItem>  
            <MudPaper Outlined="true">Section 2</MudPaper>
        </MudItem>
        <MudItem>  
            <MudPaper Outlined="true">Section 3</MudPaper>
        </MudItem>
        </MudGrid> 
    </MudContainer> 

    <MudContainer Gutters="false" Outlined="true" Height="50px">
            <MudStack Spacing="1" Elevation="1">
                <MudPaper Height="140px"  Outlined="true">
                Main Table  
                </MudPaper>
                <MudPaper Height="20px" Outlined="true">
                Ready
                </MudPaper>
            </MudStack>
        </MudContainer>

    </MudStack>
</MudPaper>

一切正常（见图（1）和（2））。当在 .NET8 MAUI Blazor 混合应用程序中使用相同的 .razor 页面标记时，

MudStack

的

MudContainer

元素在左侧和右侧有较大的空白边距 - 请参见图片 (3)。

如何修复 https://try.mudblazor.com/snippet/QOmoaXYXJzLgAEtS 标记，使其

MudContaner

s' 在 MAUI Blazor 混合应用程序中以与

try.mudblazor.com

相同的方式拉伸？

图片：

• 图片(1)

• 图片（2）

• 图片(3)

Answer 1

在 .NET8 MAUI Blazor 中使用相同的 .razor 页面标记时 混合应用程序然后

MudStack's

MudContainer

元素有大的空 左侧和右侧的边距

要删除左侧较大的空白边距，您需要将

Align Content

设置为

align-content-start

，这将控制行向左侧移动，因此只需将

Class="d-flex align-content-start flex-wrap flex-grow-1 "

添加到

 <MudStack>

即可，如下所示。对于右边距，我认为它是由您放置的项目的实际宽度定义的，您无法消除它。

<MudPaper Outlined="true" Spacing="1"
          Style="background-color:aquamarine;padding:10px 10px 10px 10px;">

    <MudStack Elevation="1" Row="false"

              Class="d-flex align-content-start flex-wrap flex-grow-1 "

              Style="background-color:moccasin;padding:10px 10px 10px 10px;align-items:stretch"
              Outlined="true">

更多详情，您可以参考https://mudblazor.com/utilities/justify-content#class-reference。