Blazorise搭配Bootstrap 5如何减小表单标签与输入框的间距

表单标签和输入控件间距过大由两个默认规则导致：

• 集成Bootstrap 5时，Blazorise的<FieldLabel>组件默认渲染带.form-label类的标签，Bootstrap 5给这个类设置了0.5rem的下边距
• 现有代码没有使用Blazorise表单要求的<Field>容器包裹单组表单项，组件内置的间距适配规则没有生效，同时Tooltip组件包裹多元素时也会产生额外布局空隙。

方案1：使用标准Field组件结构（推荐） #

Blazorise表单设计规范要求用<Field>作为单组表单项的根容器，搭配Bootstrap 5 provider时会自动收敛为合理的默认间距，调整后代码如下：

<Row>
  <Column ColumnSize="ColumnSize.Is2.OnTablet.Is1.OnFullHD">
    <Field>
      <Tooltip Text="Data de Fim" Placement="TooltipPlacement.Top">
        <FieldLabel TextColor="TextColor.Secondary">Inicio</FieldLabel>
        <DateEdit Style="width:150px" TextColor="TextColor.Primary" TValue="DateTime?" @bind-Date="Agenda.PeriodoInicial" />
      </Tooltip>
    </Field>
  </Column>
  <Column ColumnSize="ColumnSize.Is2.OnTablet.Is1.OnFullHD">
    <Field>
      <Tooltip Text="Data de Fim" Placement="TooltipPlacement.Top">
        <FieldLabel TextColor="TextColor.Secondary">Fim</FieldLabel>
        <DateEdit Style="width:150px" TextColor="TextColor.Primary" TValue="DateTime?" @bind-Date="Agenda.PeriodoFinal" />
      </Tooltip>
    </Field>
  </Column>
  <Column ColumnSize="ColumnSize.Is8.OnTablet" Class="form-check-inline">
    <Field>
      <FieldLabel TextColor="TextColor.Secondary">Periodo</FieldLabel>
      <RadioGroup TextColor="TextColor.Secondary" Orientation="Orientation.Horizontal" TValue="int" Name="tipoPeriodo" @bind-CheckedValue="Agenda.TipoPeriodo">
        <Radio TextColor="TextColor.Primary" Inline="true" Value="0">Data Inicio</Radio>
        <Radio TextColor="TextColor.Secondary" Inline="true" Value="1">Data Liberação</Radio>
      </RadioGroup>
    </Field>
  </Column>
</Row>

如果不需要鼠标悬停在标签上也触发Tooltip，可以把Tooltip组件移到仅包裹输入控件，能进一步消除多余空隙。

方案2：通过工具类自定义单标签间距 #

如果不想调整现有代码结构，直接给<FieldLabel>添加Bootstrap内置的间距工具类覆盖默认边距即可，比如要缩小到0.25rem就加mb-1，要完全消除间距就加mb-0：

<FieldLabel Class="mb-1" TextColor="TextColor.Secondary">Inicio</FieldLabel>

常用的下边距类对应数值：

• mb-0：margin-bottom: 0
• mb-1：margin-bottom: 0.25rem
• mb-2：Bootstrap默认值，margin-bottom: 0.5rem
• mb-3：margin-bottom: 1rem

方案3：全局覆盖默认样式 #

如果整个项目需要统一调整标签和输入框的间距，直接在全局CSS文件中覆盖默认样式即可：

.form-label {
  margin-bottom: 0.25rem !important; /* 按需调整数值 */
}

内容的提问来源于stack exchange，提问作者Rafael Parenza