<p>Bootstrap 5 中 label 和 input 垂直堆叠是默认行为，窄屏下“重叠”实为无间距导致的视觉压迫；应使用 row+col-* 栅格布局并添加 mb-3 等间距类，避免 form-floating 和手动 margin。</p>
Bootstrap 5 中 label 和 input 垂直堆叠是默认行为，不是 bug
窄屏下 label 和 input 看起来“重叠”，其实是它们都占满整行、上下紧贴导致的视觉压迫感——form-label 和 form-control 在小屏（xs）下默认都是 display: block 且无间隙，没加 mb-2 或 mb-3 就会紧挨着。这不是错位，是未预留间距。
- 别指望靠
form-floating解决：它把 label 浮在 input 上方，反而加剧“挤在一起”的观感，且不支持响应式断点控制 label 宽度 - 检查是否漏了间距类：每个
form-group或row容器后必须加mb-3（或类似工具类），否则 label 和 input 之间没有 margin - 避免用
margin-top手动调：容易和 Bootstrap 的垂直对齐类（如align-items-center）冲突，尤其在嵌套row里
用 row + col-* 控制窄屏堆叠逻辑，而非强行“拉平”
想让窄屏下 label 和 input 分开但又不顶到一起，关键是用栅格明确划分空间，而不是依赖默认块级流。Bootstrap 5 不再有 form-horizontal，但你可以用 row + col-sm-12 主动声明“小屏各占一行”。
- 给每组 label+input 包一层
<div class="row mb-3">，确保row存在（否则col类无效） - label 加
col-sm-12 col-md-2：小屏占满、中屏固定 2 列宽 - input 外层 div 加
col-sm-12 col-md-10：小屏也占满，但自动换行到底部，和 label 形成清晰分隔 - 别给 label 设
width或inline-block：会破坏栅格计算，导致窄屏下宽度溢出或错位
小屏输入框 padding 过大导致文字被“顶出”边界
看起来像标签重叠，实际可能是 form-control 的默认 padding 在窄屏下撑得过大，让文字紧贴左边缘甚至被裁切，和上一行 label 视觉连成一片。这不是定位问题，是内边距失控。
- 小屏下建议用
py-3替代默认 padding：py-2（0.5rem）太紧，py-4（1.5rem）又太松，py-3（1rem）更平衡 - 别改
form-control的border-radius：小屏圆角过大会挤压可用宽度，加剧文字偏移 - 如果用了
form-floating，窄屏下 label 上浮后可能遮挡 input 文字首字符——此时应加pt-4给 input 预留顶部空间
动态插入表单时 DOM 结构错位引发的假重叠
JS 动态生成表单项后，label 和 input 看似重叠，很可能是 label 没正确包裹在 row 内，或者 for 属性指向了不存在的 id，导致浏览器无法识别语义关系，渲染时丢弃了默认间距逻辑。
- 检查生成的 HTML：确认每个
label都在row下，且for和对应input的id完全一致（大小写、符号都不能差） - 避免在 JS 拼接字符串时提前闭合
div：比如'<div class="row"><label>Name</label></div><input>'—— input 已经脱离 row，栅格失效 - 用
document.createElement+appendChild替代字符串拼接，能规避 HTML 结构断裂风险
真实项目里最容易被忽略的是：窄屏下的“重叠感”往往来自 padding、margin、line-height 三者叠加的视觉误差，而不是布局类写错了。调试时先禁用所有自定义 CSS，只留 Bootstrap 原生类，再逐个加回间距工具类，比直接查 JS 更快定位根源。
