最稳妥做法是将每个表单控件（含label）包裹在col-容器中，嵌套于row下，确保每行col-数字之和为12；禁用固定width，优先用max-width配合w-100；label与input需分别设col-*并配平，label加text-end右对齐。
直接用 col-* 套每个控件就行，但必须满足“同一行 + 总和为 12”
Bootstrap 表单控件本身不等宽，form-control 默认是 width: 100%，但它的父容器宽度不统一，控件自然就参差不齐。最稳妥的做法是把每个控件（连同其 label）都包进 col-* 容器里，并确保一行内所有 col-* 的数字加起来等于 12。
- 比如三个输入框要等宽：用
col-4×3；两个输入框：用col-6×2 - 必须嵌套在
row下，否则col-*的负 margin 和 flex 行为会失效 - 别只写
col（无后缀），它只在 ≥576px 生效，小屏下会堆叠——真要全尺寸等宽，得写col-4或col-sm-4 -
col-4不等于width: 33.333%，它是flex: 0 0 auto+max-width: 33.333%，内容超长时仍可能撑开
form-control 自身设 width 会破坏响应式，别这么干
有人试过给 input.form-control 直接加 style="width: 200px" 或 CSS 类设固定宽，结果小屏下控件溢出、换行错乱。这是因为 form-control 的默认样式依赖父容器的 flex 布局和百分比宽度，硬设像素宽会脱离响应式链条。
- 移动端 viewport 变窄时，固定宽控件无法收缩，常导致横向滚动或遮挡按钮
- 若必须限制最大宽度，用
max-width+w-100组合更安全：<input class="form-control w-100" style="max-width: 300px"> - 所有手动 width 都要配
box-sizing: border-box（Bootstrap 默认已设，但自定义样式里容易漏）
水平表单里 label 和 input 要分别控制，不能只调 input
在 form-horizontal 或手动用 row + col 做水平布局时，常见问题是 label 宽度不一致，导致 input 起始位置参差——这时光调 input 没用，label 才是锚点。
- label 必须包在
col-*里，并加text-end（不是text-right，v5 已废弃）右对齐 - label 和 input 的
col-*数字要配平，比如col-sm-3+col-sm-9，加起来是 12 - 别给 label 加
style="width: 120px"：inline 元素设 width 无效，除非同时加display: inline-block，但这会绕过栅格响应逻辑 - 如果 label 文字长度差异极大（如“姓名” vs “用户实名认证绑定手机号”），才考虑内联样式方案，且必须补
@media适配小屏
用 row-cols-* 对表单控件无效，它只管直接子元素
row-cols-3 看起来像“让这一行三等分”，但它只作用于 row 的**直接子元素**。而表单中，一个字段通常由 div.form-group 包着 label 和 input，row-cols-3 会把整个 form-group 当作一个单元来分，不是把 input 分三等宽。
- 错误写法：
<div class="row row-cols-3"><div class="form-group">...</div></div>→ 三个 form-group 并排，但每个内部的 input 仍不等宽 - 正确做法：拆掉
form-group，让label和input都成为row的直系子项，再分别加col-* -
row-cols-*更适合卡片列表、图标组这类扁平结构，表单这种带语义嵌套的场景，老实用col-*显式控制更可靠
word-break 的 ID 字段、图片、或者没加 min-width: 0 的 flex 子项，都会悄悄撑开列宽。调试时先关掉所有自定义样式，用纯 Bootstrap 栅格跑一遍，确认 baseline 正常，再一层层加需求。
