移动端表单显示不全的核心原因是form-control的width:100%被父容器padding、flex布局或固定宽度干扰，导致溢出或截断；小屏下label与input须垂直堆叠而非并排，应改用col-12、移除.row、用.mb-2/.mb-3控制间距，并避免overflow:hidden、viewport缺失及嵌套层级中max-width/display:grid的干扰。
表单在移动端显示不全，核心原因是 form-control 类的默认宽度（width: 100%）被父容器的 padding、flex 布局或固定宽度干扰，导致内容溢出或截断；更常见的是 label 和 input 没做断点分离，小屏下仍强行并排。
label 和 input 在小屏下必须垂直堆叠，不能并排
Bootstrap 默认用 .form-group + .row + .col 实现左右布局，但移动端没空间容纳两列。强行保留 col-sm-2 + col-sm-10 会导致 input 被压缩到看不见，或者 label 文字换行错位。
- 把所有
col-*类换成col-12，确保 label 和 input 各占一行 - 删掉
.row包裹 —— 它在 xs 断点下会因 flex 换行逻辑失效，反而撑高间距 - 用
.mb-2或.mb-3控制 label 和 input 之间的垂直距离，比依赖 margin-top 更可控 - 如果用了
form-floating，注意它在 iOS Safari 下对 placeholder 的渲染有偏移，建议小屏退回到传统label + input结构
input 内容被裁剪或无法完整输入
现象是输入文字时右侧被切掉、光标卡在中间、长邮箱/手机号显示不全——这通常不是 width 问题，而是 form-control 的 padding 和 box-sizing 在小屏下与 viewport 缩放冲突。
- 检查是否手动加了
style="width: 300px"或min-width：删掉，让width: 100%生效 - 确认父容器没设
overflow: hidden（比如误套在.table-responsive或.offcanvas-body里） - 在真机上测试时，如果输入框聚焦后放大，说明 viewport 缺失或写错了，补全：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 安卓 WebView 下偶发
form-control的line-height计算异常，可显式加style="line-height: 1.5"固定
按钮组或复选框在手机上挤成一团
.btn-group、.form-check 默认横向排列，在 375px 宽度下根本放不下三个按钮或五个选项，结果就是文字重叠、点击区域过小、甚至触发浏览器的“双击缩放”。
- 给按钮组加
d-flex flex-column，再用gap-2控制间距，比flex-wrap更稳 - 复选框改用
.form-check-inline？别——它只适合桌面端；移动端一律用独立.form-check，每个都col-12 - 如果用了
.form-switch，注意它的伪元素尺寸在小屏下可能超出容器，加me-auto或justify-content-start防止右溢出 - 避免把整个
form包在.d-flex里 —— flex 容器会压制form-control的 100% 宽度行为
真正容易被忽略的不是类名怎么写，而是 form 的嵌套层级：一旦 form 外层是 .modal-body 或 .card-body，就要确认它们没加 max-width 或 display: grid，否则 form-control 的 100% 就失去了参照系。
