为什么Bootstrap输入框加图标后文字和图标重叠-Bootstrap教程-PHP中文网

图标与文字重叠的根源是input未预留图标空间：必须将图标用input-group-text包裹并作为input同级子元素，同时为input设置足够padding（如ps-4），并统一图标与input的line-height和响应式间距。

为什么bootstrap输入框加图标后文字和图标重叠

文字和图标重叠，根本不是图标没对齐，而是 input 的内边距（padding）没为图标预留空间。

input-group-text 没包住图标，或没加到 input 同级

常见错误是把直接写在

 外面，或者嵌套在额外的  里但没加 input-group-text 类。Bootstrap 的 input-group 依赖 flex 布局和语义类来分配空间，脱离结构后图标就“掉进” input 的内容区了。必须确保图标包裹在  内（Bootstrap 5+），且该 span 和  是  的**同级直接子元素**
不要写成：

 —— 中间多了一层 ，flex 子项关系被破坏
也不要用 position: absolute 叠加图标，否则 input 宽度仍占满全宽，文字自然撞上去

input 缺少左右 padding，导致文字溢出到图标区域
input-group-text 只负责“画图标”，不自动给 input 加内边距。如果 input 的 padding-left（左图标）或 padding-right（右图标）没手动设够，输入的文字就会直接顶到图标下面。

左图标场景：给  加 class="ps-4"（Bootstrap 5.3+）或自定义 style="padding-left: 2.5rem;"

右图标场景：用 pe-4 或 padding-right: 2.5rem，数值需略大于 input-group-text 的宽度（含图标、内边距）
别只靠 input-group-text 的 padding —— 那是图标的内边距，不是 input 的

图标尺寸过大或 line-height 不匹配，撑高容器引发错位
当图标用 fs-5 或 display-4 这类大字号类，而 input 的 line-height 仍按默认值（如 1.5）计算时，图标会把整个 input-group 行高拉高，文字基线偏移，视觉上像“叠在一起”。

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										

统一控制图标大小：推荐 fs-4（约 1.5rem），并确保 input-group-text 的 height 和 line-height 与 form-control 一致（Bootstrap 默认已做，勿覆盖）
避免混用尺寸类：h5 + fs-3 + text-lg 同时出现，会导致高度计算冲突
检查浏览器 DevTools 的 Computed 面板：确认 input 的实际 height 和 line-height 是否等于 input-group-text 的高度

最常被忽略的一点：重叠问题往往在移动端更明显，因为小屏下 input-group-text 的宽度压缩后，input 的 padding 却没随断点动态调整 —— 所以响应式场景务必用 ps-sm-3 ps-md-4 这类断点类，而不是固定 ps-4。