使用MDBootstrap与Bootstrap4时表单标签与输入值重叠问题求助

• 首先完成MDB浮动标签组件初始化：MDBootstrap的form-outline浮动标签效果依赖JS逻辑驱动，你需要在页面加载完成后执行初始化代码，代码如下：

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

• 处理预填值场景：如果你的输入框存在默认填充值、或者页面加载后会异步回填内容，需要手动给对应form-label添加active类，示例如下：

<label class="form-label active" for="form3Example1c">Full Name</label>

• 移除无效属性：你当前代码里的mdbInput是MDB Angular版本的专属指令，原生JS版本不需要添加该属性，删除即可避免潜在冲突。
• 检查依赖引入：确保你已经正确引入了MDBootstrap对应版本的CSS和JS文件，缺少样式文件会直接导致浮动标签的定位逻辑失效，出现重叠问题。
• 兼容性调整：你当前代码里使用的g-3是Bootstrap 5的间距类，在Bootstrap 4环境下不会生效，你可以替换为Bootstrap 4的gutter相关类或者自定义间距样式。

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