以Blazorise形式水平对齐字段

问题描述

我正在客户端的blazor应用程序中使用Blazorise模板：https://blazorise.com/docs/，并使用Grid组件。

我想以以下格式显示字段：

这是我通过使用文档来实现的目标：

    <CardBody>
        <Row>
            <Column ColumnSize="ColumnSize.Is7">
                <EditForm Model="@vendorEditObj" OnSubmit=@FormSubmitted>
                    <Fields>
                        <Field Horizontal="true" ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Height</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <TextEdit @bind-Text="@vendorEditObj.Height" />
                                <ValidationMessage For="() => vendorEditObj.Height" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true" ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Weight</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <InputNumber @bind-Value="@vendorEditObj.Weight" />
                                <ValidationMessage For="() => vendorEditObj.Weight" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true" ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Sex</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <TextEdit @bind-Text="@vendorEditObj.Sex" />
                                <ValidationMessage For="() => vendorEditObj.Sex" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true" ColumnSize="ColumnSize.Is3.OnDesktop">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Eyes</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <TextEdit @bind-Text="@vendorEditObj.Eyes" />
                                <ValidationMessage For="() => vendorEditObj.Eyes" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true" ColumnSize="ColumnSize.Is3.OnDesktop">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Hair</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <TextEdit @bind-Text="@vendorEditObj.Hair" />
                                <ValidationMessage For="() => vendorEditObj.Hair" />
                            </FieldBody>
                        </Field>
                    </Fields>

                    <Fields>
                        <Field Horizontal="true" ColumnSize="ColumnSize.Is6.OnDesktop">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Race</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <Select @bind-SelectedValue="@vendorEditObj.Race">
                                    <SelectItem Value="@("White")">White</SelectItem>
                                    <SelectItem Value="@("Black")">Black</SelectItem>
                                </Select>
                                <ValidationMessage For="() => vendorEditObj.Race" />
                            </FieldBody>
                        </Field>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.Is6.OnDesktop">Country</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                                <Select @bind-SelectedValue="@vendorEditObj.Country">
                                    <SelectItem Value="@("CA")">CA</SelectItem>
                                    <SelectItem Value="@("FL")">FL</SelectItem>
                                    <SelectItem Value="@("NV")">NV</SelectItem>
                                    <SelectItem Value="@("DC")">DC</SelectItem>
                                </Select>
                                <ValidationMessage For="() => vendorEditObj.Country" />
                            </FieldBody>
                        </Field>
                    </Fields>

                   <Field Horizontal="true">
                        <FieldLabel ColumnSize="ColumnSize.Is3.OnDesktop">Identifying Marks</FieldLabel>
                        <FieldBody ColumnSize="ColumnSize.Is9.OnDesktop">
                            <TextEdit @bind-Text="@vendorEditObj.IdentifyingMarks" />
                            <ValidationMessage For="() => vendorEditObj.IdentifyingMarks" />
                        </FieldBody>
                    </Field>
                </EditForm>
            </Column>
        </Row>
    </CardBody>

但这就是我得到的：

我不了解我认为的网格系统。我想主要的问题是水平标记的使用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）