移动端Bootstrap .form-control文本框与选择框文本重叠问题求助

问题说明 #

使用Bootstrap的.form-control类构建表单时，移动端视图下文本框（textbox）和选择框（selectbox）出现文本重叠问题，已尝试以下CSS属性但未解决：

padding-bottom: 10px !important;
line-height: 30px !important;
min-height: 50px;
display: flex !important;
white-space: normal;
overflow: visible;

问题截图：

可行解决方案 #

1. 移除Flex布局设置 #

.form-control默认是块级元素，强制设置display: flex !important会打乱控件内部的文本排版逻辑，先删除这个属性，恢复原有布局结构。

2. 移动端媒体查询精准适配 #

针对移动端设备单独调整控件的内边距、行高，避免固定高度限制：

@media (max-width: 767px) {
  .form-control {
    padding: 0.75rem 1rem !important; /* 增大上下内边距，给文本预留足够空间 */
    line-height: 1.5 !important; /* 使用相对行高，适配不同字体大小 */
    min-height: unset; /* 取消固定最小高度，让控件随内容自适应 */
    white-space: nowrap; /* 避免选择框文本换行引发重叠 */
  }
}

3. 排查全局样式冲突 #

检查项目中是否有其他自定义CSS对input[type="text"]、select设置了强制height、position或line-height属性，这类全局样式很容易覆盖Bootstrap的默认适配规则，导致文本重叠。

4. 升级Bootstrap版本 #

若使用的是旧版Bootstrap（如v3.x），移动端表单控件存在已知排版bug，建议升级到最新稳定版（v5.x），新版本对移动端响应式适配做了全面优化。

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