Bootstrap本身不提供支付逻辑，关键在于用其响应式栅格（container-fluid+col-12）、form-check单选控件、移动端适配技巧（如font-size:16px、禁用缩放）快速构建高可用支付选择页。
Bootstrap 本身不提供支付逻辑，也不内置收银台组件；用它做「手机端支付选择页」的关键是：用 Bootstrap 的响应式栅格、表单控件和实用类快速搭建符合移动端交互习惯的 UI 结构，同时避开默认样式干扰和 PC 端断点陷阱。
用 container-fluid + col-12 控制窄屏宽度
手机端支付页必须撑满视口宽度，且不能横向滚动。Bootstrap 5 默认 container 在小屏下设了 max-width: 576px，会留白；直接用 container-fluid 是最稳妥的选择。所有选项行统一用 col-12，避免响应式断点在 sm 或 md 触发后错位。
常见错误：写成 <div class="col-sm-12"> —— 这在 iPhone SE 等超小屏上可能因父容器未重置 padding 而溢出。
<p>实操建议：</p>
<ul><li>根容器用 <code><div class="container-fluid px-0">，手动清空左右 padding
<li>每个支付方式卡片用 <code><div class="col-12 py-3 border-bottom">，确保垂直间距一致、边框对齐
<li>禁用 <code>col-md-6 类——支付方式通常是单列垂直排列，多列在小屏上反而增加误触风险
用 form-check 实现单选按钮但隐藏原生圆点
支付方式必须单选，form-check 是 Bootstrap 提供的语义化方案，但默认的圆点在移动端太小、对比度低，用户难确认状态。不能删掉 form-check-input（否则失去表单绑定和可访问性），而是用 CSS 隐藏它，再用 form-check-label 的伪元素模拟高亮效果。
常见错误：用 display: none 隐藏 form-check-input —— 这会导致屏幕阅读器无法识别选中状态，也破坏了表单提交逻辑。
实操建议：
- 保留
<input type="radio" class="form-check-input visually-hidden" name="pay_method">，用visually-hidden而非hidden或display: none - 在
form-check-label上加自定义背景和图标，例如：<label class="form-check-label d-flex align-items-center p-3"><i class="bi bi-wechat me-2"></i> 微信支付</label></li> <li>通过 <code>:checked ~ .form-check-label
改变背景色或加勾选图标，确保视觉反馈明确
避免 navbar 和 sticky-top 在 iOS Safari 中卡顿
支付页顶部常需返回按钮或标题，但 Bootstrap 的 navbar 默认启用 transform: translateZ(0) 强制硬件加速，在旧版 iOS Safari 中反而引发滚动卡顿或输入框失焦。同理，sticky-top 在部分安卓 WebView 里会失效或遮挡软键盘。
使用场景：用户点击「微信支付」后唤起 JSAPI，此时页面若带 sticky 标题，软键盘弹出会把标题顶到输入框上方，遮挡关键信息。
实操建议：
- 顶部区域改用普通
<header class="bg-white py-3 px-4"></header>，用position: relative，不依赖 sticky - 返回按钮用
<button type="button" class="btn btn-link p-0 text-decoration-none"><i class="bi bi-arrow-left"></i></button>，避免navbar-toggler的额外事件绑定 - 如需固定底部「确认支付」按钮，用
position: fixed; bottom: 0;+padding-bottom: env(safe-area-inset-bottom)适配 iPhone 底部横条
form-control 输入框在移动端聚焦时自动放大问题
部分 Android 浏览器（如 Samsung Internet）会对 form-control 的 font-size 自动放大，导致布局跳动、光标偏移。支付页常含金额输入框，若设 <code>font-size: 14px，用户一点击就触发缩放，按钮位置瞬间上移，易误点。
性能影响：强制缩放会触发 layout → paint → composite 全流程，比正常渲染慢 2–3 帧，在低端机上明显卡顿。
实操建议：
- 所有输入框显式设置
style="font-size: 16px;"，哪怕视觉上略大，也比跳动强 - 禁用用户缩放：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，但仅限支付流程页，不要全局加 - 金额输入推荐用
<input type="tel" inputmode="decimal" pattern="[0-9.]*">，唤起数字键盘，减少文本输入错误
真正难的不是排版，而是让每个点击都有确定反馈、每次输入都不跳、每台手机都保持同样的视觉节奏。Bootstrap 只帮你省掉重置 margin 和 flex 对齐的功夫，剩下的——比如软键盘顶起时底部按钮是否还可达、微信 JSAPI 回调后如何防重复提交——得靠真实机型测试，不是加个 class 就能解决的。
