将 Form 中的表单项与嵌套的 FormItems 对齐

Question

我在 blazor 中使用 ant design。我目前遇到的一个问题是，在嵌套 <FormItem> 布局中，我无法将项目作为表单对齐。它们目前不是内联的。有什么解决办法吗？我猜它应该以某种 HTML 方式完成？

这是我当前的代码：

  <Panel Header="Basic information" Key="1">
    <Form Layout="FormLayout.Horizontal" Model="this">
        <FormItem Label="Record title">
          <Input @bind-Value="@this.Title" />
        </FormItem>
        <FormItem Label="Description 1235465 ">
          <Input @bind-Value="@this.Description" />
        </FormItem>
        <FormItem Label="Content">
          <TextArea Rows="4" @bind-Value="@this.Content" />
        </FormItem>
        <FormItem Label="Date" NoStyle>
          <DatePicker @bind-Value="@this.SelectedDate" ShowTime="@true" OnChange="this.OnDateSelected" />
        </FormItem>
    </Form>
  </Panel>

这是目前的样子：

这是我想要实现的目标的示例：

Answer 1

您可以在 Form 组件上使用 LabelColSpan 属性，如下所示：

<Form 
   LabelColSpan="6" /* it can be a number between 1-24 */
   ...
>

将 Form 中的表单项与嵌套的 FormItems 对齐

Align form items in a Form with nested FormItems

html

css

antd

blazor