Bootstrap 5框架下Floating Labels浮动标签功能不生效如何解决？

• 移除多余的autofocus属性
  单页面仅允许存在一个autofocus属性，你的代码中两个输入框都添加了该属性，重复属性会导致表单初始渲染异常，直接影响浮动标签的触发逻辑，仅保留第一个输入框的autofocus即可。
• 确认Bootstrap 5资源引入正确
  浮动标签是Bootstrap 5新增的专属功能，如果你引入的是Bootstrap 4及以下版本的资源，该功能完全无法生效。同时要确保引入顺序为先加载Bootstrap CSS文件，再加载Bootstrap JS文件，资源路径正确，不存在加载失败的情况。
• 检查自定义样式冲突
  如果你有自定义CSS修改了.form-floating、.form-control类的padding、position、font-size等核心属性，会覆盖Bootstrap的默认定位逻辑，导致浮动标签无法正常上浮，可以先注释掉自定义的表单相关样式验证是否为冲突导致。
• 确认placeholder配置正确
  浮动标签依赖input/textarea的placeholder属性存在，你当前代码中placeholder设置为空格符合要求，不要将其修改为空字符串或者直接删除该属性。

修复后代码示例 #

<div class="form-floating mb-3">
    <input type="text" class="form-control" autofocus id="txtNome" placeholder=" ">
    <label for="txtNome">Full Name</label>
</div>
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="txtEmail" 
        placeholder=" ">
    <label for="txtEmail">E-mail</label>
</div>
<div class="form-floating mb-3">
    <textarea class="form-control" id="txtMensagem" placeholder=" " 
              style="height: 200px;"></textarea>
    <label for="txtMensagem">Message</label>
</div>

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