bootstrap内联单选框垂直对齐需设input的vertical-align为-2px或text-bottom并配合margin-top，且input与label须同级dom结构；em单位易失准，flex对齐需重构html使二者为同一d-flex的直接子元素。
Bootstrap内联单选框
默认情况下，<input type="radio"> 和紧随其后的文字在视觉上会“浮”在文字中线之上，尤其在小字号或紧凑行高时更明显。这不是渲染 bug，而是浏览器对表单控件 baseline 的默认处理与文字 baseline 不一致导致的。
常见错误是给 label 加 line-height 或盲目调 vertical-align，但这些值容易被父容器 line-height 覆盖，且在响应式缩放时失效。
- 确保
label是inline或inline-block（Bootstrap 的.form-check-inline已设为display: inline-block） - 给
input[type="radio"]显式加vertical-align: -0.125em（与 Bootstrap Icons 一致的基准偏移） - 避免用
margin-top硬拉——它会破坏不同 font-size 下的相对关系 - 如果文字换行，优先改结构：把文字包进
<span></span>，再统一设align-self: center
用.form-check-inline但文字还是下沉
Bootstrap 5 的 .form-check-inline 本身不解决垂直对齐，它只控制水平排列。真正起作用的是内部 input 和 label 的基线关系，而 Bootstrap 并未重置 radio 的 vertical-align。
实测有效写法：
.form-check-inline input[type="radio"],
.form-check-inline input[type="checkbox"] {
vertical-align: text-bottom;
margin-top: 0.125em;
}
这个组合能对齐大多数常见字体尺寸（0.875rem～1rem），比 baseline 更稳定。注意不要同时设 margin-top 和 vertical-align: middle，后者会覆盖前者。
响应式下文字变大导致对齐又偏了
当用 text-lg 或 fs-5 类放大文字时，vertical-align: -0.125em 的像素值会随字体缩放，但 offset 可能不再匹配——比如 1.25rem × -0.125 = -0.15625rem，而控件实际需要的是 -2px。
- 放弃 em 单位，改用固定像素偏移：
vertical-align: -2px - 或用 CSS 自定义属性做断点适配：
--radio-align: -2px;，再配合@media (min-width: 992px) { --radio-align: -3px; } - 最稳妥的是封装成组件级样式：只作用于明确的
.user-preferences .form-check-inline这类路径，避免全局污染
为什么加 d-flex align-items-center 没反应
因为 .form-check-inline 的结构是 <input><label>文字</label>，不是并列子元素——input 和文字不在同一层级，align-items-center 找不到两个可对齐的 flex 项。
要让它生效，必须重构 DOM：
<div class="d-flex align-items-center"> <input type="radio" name="opt" id="opt1"><label for="opt1" class="mb-0 ms-2">选项一</label> </div>
关键点：
-
input和label必须是同一div.d-flex的直接子元素 -
label去掉默认margin-bottom（mb-0），否则会撑高 flex 容器 - 别用
.form-check-inline包裹这个结构——它的 display 规则会干扰 flex
vertical-align 只对行内元素生效、align-items 只认直接子元素。没修好，八成是结构没拆干净，或者用了不该用的单位。
