如何解决以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 举报,一经查实,本站将立刻删除。