Bootstrap单选框对齐复选框怎么调-Bootstrap教程-PHP中文网

根本原因是form-check-input统一的margin-top值与radio、checkbox不同基线位置冲突，导致视觉错位；推荐用css分别设置[type="radio"]和[type="checkbox"]的margin-top微调对齐。

bootstrap单选框对齐复选框怎么调

Bootstrap 4/5 中 `form-check` 单选与复选框默认不对齐的根本原因

Bootstrap 的 form-check-input（<input type="checkbox"> 或 <input type="radio">）本身是 inline 元素，但它的父容器 form-check 使用了 display: block 和 margin-bottom: 0.125rem；而真正导致视觉错位的，是 form-check-input 的 margin-top: 0.25rem（Bootstrap 5）或 margin-top: 0.3rem（Bootstrap 4），这个值对 radio 和 checkbox 是统一的，但两者基线（baseline）位置不同 —— 圆形 radio 比方形 checkbox 视觉上“坐得更高”，所以看起来 checkbox 下沉、radio 上浮。

用 `form-check-inline` 无法解决对齐问题？

form-check-inline 只是把多个 form-check 并排成行内块，不改变单个控件的垂直对齐逻辑。它反而会放大错位：因为所有 form-check-input 都按同一 margin-top 计算，而文字行高、字体渲染差异会让 radio 和 checkbox 在同一行里明显“不在一条线”。

不要指望 form-check-inline 自动对齐
不要给 input 直接加 vertical-align（会被 Bootstrap 的重置样式覆盖）
真正有效的干预点在 form-check-input 的父级 form-check 或其伪元素

推荐方案：用 CSS 覆盖 `form-check-input` 的 `margin-top`

最轻量、兼容性好、不影响响应式布局的方式，是为 radio 单独微调：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

.form-check-input[type="radio"] {
  margin-top: 0.25rem;
}
.form-check-input[type="checkbox"] {
  margin-top: 0.3rem;
}

这个差值（约 0.05rem）需根据实际字体大小和浏览器渲染微调，常见值是 0.25rem vs 0.3rem（BS5），或 0.275rem vs 0.325rem（更精细）
必须写在 Bootstrap CSS 之后，或用 !important（不推荐，优先靠加载顺序）
若项目用 Sass，直接在自定义变量后重写 $form-check-input-margin-y 的衍生规则

进阶：用 Flex 布局彻底接管对齐逻辑

如果项目已用 Flex 布局，可绕过 form-check 的默认流式结构：

<div class="d-flex align-items-center">
  <input class="form-check-input me-2" type="radio" name="opt" id="r1"><label class="form-check-label mb-0" for="r1">选项一</label>
</div>
<div class="d-flex align-items-center">
  <input class="form-check-input me-2" type="checkbox" id="c1"><label class="form-check-label mb-0" for="c1">勾选我</label>
</div>