微信x5内核对flex、vertical-align等css属性兼容性差，导致bootstrap表单错位；应强制display: flex、修正line-height、避免input-group、用内联style微调。
微信内置浏览器（X5内核）里 Bootstrap 表单错位，基本不是 Bootstrap 本身的问题，而是 X5 对 flex 布局、vertical-align、line-height 和表单控件默认样式的兼容性处理异常——尤其在 iOS 微信和 Android 微信 8.0.40+ 版本中高频复现。
为什么 form-inline 在微信里直接“垮掉”
微信 X5 内核对 @media (min-width: 576px) 的断点识别不准，有时视口宽度明明 >576px 却仍回退到 display: block；更麻烦的是它会忽略 align-items-center 或部分 flex 工具类的渲染，导致按钮和输入框上下偏移 2–4px。
- 用 DevTools 远程调试（或微信开发者工具）检查
.form-inline计算后的display值，大概率是block而非flex - 不要依赖
form-inline的响应式断点，直接加style="display: flex !important; flex-wrap: wrap;"强制生效 - iOS 微信下
.btn的line-height常被重置为normal，手动补line-height: 1.5;可对齐
row + align-items-center 在微信里失效的典型表现
标签文字看起来“浮在 input 上方”，尤其当 label 含中文或 font-size >14px 时。这不是基线问题，是 X5 对 align-items: center 在 flex 容器中子项为 display: block 元素时的计算偏差。
解析微信公众号文章，提取标题、作者、正文、图片等信息。用户发送链接（mp.weixin.qq.com）时触发，自动提取内容并可保存至飞书表格。
- 确保
label和input都是.row的**直接子元素**，中间不能套div（X5 会多算一层 baseline） - 给
label加mb-0和py-0，去掉所有隐式垂直间距 - 对
.form-control显式设height: calc(1.5em + 0.75rem + 2px)（匹配 Bootstrap 4 默认高度），避免 X5 自动缩放导致高度不一致
微信里 input-group 错位且按钮被截断
X5 对 display: table（input-group 的底层实现）支持极差，常把 .input-group-append 渲染成脱离流的块，右侧按钮要么上移、要么被裁剪。
- 彻底弃用
input-group，改用div.d-flex+input.form-control.flex-fill+button.btn - 若必须保留，需重写 CSS：
.input-group { display: flex !important; }，并给.input-group-text, .input-group-append加align-self: center - Android 微信中
input[type="number"]的 spinner 按钮会撑宽容器，加appearance: none+-webkit-appearance: none抑制
真正难调的是混合场景：比如 form-inline 里嵌了 row，或者 label 用了 col-form-label 但父容器又加了 px-3 ——X5 会把所有 padding、margin、flex gap 全部“吃掉”一部分，最终错位像素数随系统字体缩放比例浮动。这时候别死磕 class，直接上内联 style="transform: translateY(-1px)" 微调比找根因更快。
