用Bootstrap 5栅格+表单可实现手机适配答题卡：①用col-12确保每题独占一行；②用form-check统一单选样式并严格匹配name与for/id；③加viewport禁缩放及微调CSS对齐圆点与文字。
直接用 Bootstrap 5 的栅格 + 表单组件就能做出适配手机的答题卡，不需要额外框架或媒体查询 hack；关键在控制列宽、禁用缩放、统一单选按钮样式。
用 col-12 和 form-check 布局单题区域
手机竖屏宽度有限，每道题必须独占一行，避免横向滚动或错位。Bootstrap 5 的 col-12 在所有断点下都占满容器宽度，比写 @media 更稳。
单选按钮默认样式松散、文字对不齐，必须套 form-check 容器，并用 form-check-input + form-check-label 配对：
<div class="col-12 mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1-a" value="A"><label class="form-check-label" for="q1-a">A. 光合作用主要发生在叶绿体</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" id="q1-b" value="B"><label class="form-check-label" for="q1-b">B. 线粒体是蛋白质合成场所</label>
</div>
</div>
- 必须给每个
input设name（同题选项 name 相同），否则无法互斥 -
for属性值要和对应input的id严格一致，不然点击文字不触发选中 - 别用
form-group（Bootstrap 4 旧类），5 里已废弃，用mb-3控制间距更直接
禁用双击缩放，防止答题时误触放大
手机浏览器双击会缩放页面，导致答题卡布局错乱、选项点不准。必须在 加 viewport 控制：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
maximum-scale=1和user-scalable=no缺一不可；只设initial-scale=1不够 - 部分安卓微信内置浏览器会忽略
user-scalable=no，但加上仍能拦截大部分误操作 - 别用
shrink-to-fit=yes（iOS 9 以下旧语法），现代 iOS 已不支持
让圆点按钮大小统一、居中对齐文字
原生 form-check-input 在不同机型上渲染尺寸不一致，且默认基线对不齐。需微调 CSS：
.form-check-input {
margin-top: 0.25rem;
width: 1.25rem;
height: 1.25rem;
}
.form-check-label {
font-size: 0.95rem;
line-height: 1.5;
}
-
margin-top是关键：默认值会让圆点下沉，加正向 margin 拉高对齐文字中线 - 固定
width/height比用transform: scale()更稳定，后者可能模糊或触发重绘 - 字体设
0.95rem而非1rem，留出点击热区余量，避免小屏误触相邻选项
最易被忽略的是：题目编号（如“第1题”）建议用 small 标签包裹并加 text-muted，既降低视觉权重，又避免字号过大挤占选项空间。真正在手机上跑通，靠的不是堆功能，而是把这三处细节压准——列宽、缩放、对齐。
