1

我MudGrid有 4MudCard个具有动态内容和高度的项目。

<MudGrid>
    <MudItem xs="12">
        <MudGrid>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>
                        Line1<br/>
                        Line1<br/>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>                                               
                        Line1<br/>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>
                        Line1<br/>
                        Line1<br/>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
        </MudGrid>
    </MudItem>
</MudGrid>

在此网址上可用： https ://try.mudblazor.com/snippet/mOclFQwNJgFhMuBf

网格用户界面

是否可以MudCard将同一行/行上的每个高度对齐？

4

2 回答 2

0

我有类似的卡问题。

您不需要使用 flex 或来自 mudblazor css 的东西。只需使用 style="height:100%"

我已经测试过了...网格对齐得很好。只有卡片没有正确弯曲...

<MudGrid>
<MudItem xs="12">
    <MudGrid>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>
                    Line1<br/>
                    Line1<br/>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>                                               
                    Line1<br/>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>
                    Line1<br/>
                    Line1<br/>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
    </MudGrid>
</MudItem>
于 2022-01-04T12:02:35.933 回答
0

我有同样的问题。我想在“标签”中创建一个网格。我解决了它如下。当然不是最好的方法

              <MudGrid>
                <MudItem Style="width: 70vh;">
                    <MudPaper Height="70vh" Elevation="3">
                        <MudText Typo="Typo.h6">Page 1</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem Style="width: 70vh;">
                    <MudPaper Height="70vh" Elevation="3">
                        <MudText Typo="Typo.h6">Page 2</MudText>
                    </MudPaper>
                </MudItem>
            </MudGrid>
于 2021-12-31T10:09:00.387 回答