Bootstrap登录表单form-outline输入标签样式显示异常

你代码里用的form-outline浮动输入框是MDBootstrap（常简称MDB）的专属扩展组件，原生Bootstrap本身没有提供这个组件的样式和交互逻辑，样式异常的核心原因是依赖缺失：

• 你当前页面只加载了原生Bootstrap的CSS/JS资源，没有引入MDB对应的文件，浏览器解析不到.form-outline下label的浮动定位、状态切换规则，标签就按照普通块级元素的默认渲染逻辑，直接排列在输入框下方，和你贴出的实际运行表现完全匹配。
• 就算后续补全了MDB资源，如果表单是通过JS动态插入页面的，还需要手动调用MDB的组件初始化方法，否则聚焦输入框、填充内容时标签上浮的交互效果也不会生效。

• 调整页面资源引入顺序：先引入Bootstrap的CSS、JS文件，再引入版本适配的MDB的CSS、JS文件，引入示例如下：

<!-- 页面<head>标签内引入CSS -->
<link rel="stylesheet" href="your-local-path/bootstrap.min.css">
<link rel="stylesheet" href="your-local-path/mdb.min.css">

<!-- 页面</body>闭合前引入JS -->
<script src="your-local-path/bootstrap.bundle.min.js"></script>
<script src="your-local-path/mdb.min.js"></script>

• 如果表单是动态渲染生成的，等DOM加载完成后执行以下初始化代码，激活所有浮动输入框组件：

document.querySelectorAll('.form-outline').forEach(item => {
  new mdb.Input(item).init()
})

补充说明：你贴出的HTML结构本身没有问题，和MDB官方示例的DOM结构完全一致，不需要修改标签结构，补全依赖、完成初始化后就能得到预期的浮动标签效果。

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