.NET 8中如何避免Bootstrap标签溢出日期选择器输入框？

问题说明 #

按照Microsoft Identity教程添加自定义出生日期（DOB）属性后，使用Bootstrap浮动表单组件时出现视觉异常，相关代码和显示效果如下：

现有代码 #

<div class="form-floating mb-3">
    <label asp-for="Input.DOB"></label>
    <input asp-for="Input.DOB" class="form-control" />
    <span asp-validation-for="Input.DOB" class="text-danger"></span>
</div>

当前显示效果 #

修复方案 #

Bootstrap浮动表单（Floating Labels）有严格的结构要求，你的问题核心是元素顺序错误加上缺少占位符设置，以下是优雅的修复步骤：

• 调整input和label的顺序：Bootstrap的浮动标签依赖CSS选择器定位input后的label，必须把input放在label前面才能触发浮动效果。
• 给input添加占位符：即使不需要显示占位文本，也要添加placeholder=" "（带空格），这是Bootstrap浮动标签正常工作的必要条件。

修复后的代码：

<div class="form-floating mb-3">
    <input asp-for="Input.DOB" class="form-control" placeholder=" " />
    <label asp-for="Input.DOB"></label>
    <span asp-validation-for="Input.DOB" class="text-danger"></span>
</div>

优化建议（可选） #

为了让标签显示更友好，同时提升交互体验，给DOB属性添加DisplayName和DataType特性：

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class InputModel
{
    // 其他属性...
    [DisplayName("出生日期")]
    [DataType(DataType.Date)]
    public DateTime DOB { get; set; }
}

DataType(DataType.Date)会让浏览器自动渲染日期选择器，简化用户输入流程。

如果调整后仍有间距问题，优先检查是否有自定义样式覆盖了Bootstrap的默认内边距，避免直接添加冗余的内边距类，遵循组件原生结构是最优雅的解决方式。

内容的提问来源于stack exchange，提问作者Dancing Diplodocus