Bootstrap 5浮动标签在Razor语法下失效问题求助

问题原因 #

1. 结构不符合Bootstrap要求：Bootstrap 5浮动标签依赖form-control元素与label元素的相邻关系，且必须是输入框在前、标签在后。你当前将ValidationMessageFor插入在两者之间，破坏了这个结构，导致样式逻辑失效。
2. 缺失placeholder属性：Bootstrap浮动标签需要输入框带有placeholder（即使是空白值），才能通过:placeholder-shown伪类正确控制标签的显示状态。

修复方案 #

调整DOM结构，将验证信息移到浮动容器外，并为输入框添加空白placeholder：

<div class="form-floating mb-3">
    @Html.EditorFor(model => model.Recipient, new { 
        htmlAttributes = new { 
            @class = "form-control", 
            @onchange = "Changed(this, 'recipient-name');",
            placeholder = " " // 必须添加空白placeholder
        } 
    })
    @Html.LabelFor(model => model.Recipient)
</div>
<!-- 将验证信息移到浮动容器外 -->
@Html.ValidationMessageFor(model => model.Recipient, "", new { @class = "text-danger" })

额外说明 #

• 编辑场景下，若模型Recipient已有值，标签自动上浮是Bootstrap的正常设计，用于提示用户输入框已有内容。
• 新建场景下，输入框为空时，标签会默认显示在输入框内部，点击输入框后才会上浮，恢复正常的浮动标签交互。

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