bootstrap多选框用row+col水平排列错位，因form-check默认block且内部结构特殊；应改用d-flex flex-wrap gap-2布局，避免网格干扰并确保基线对齐。
Bootstrap 多选框（form-check）默认垂直堆叠，强行用 row + col 水平排列会错位——根本原因是它们不是“表单控件+标签”组合，而是独立的交互单元，不能套用 label/input 的对齐逻辑。
为什么 row + col 对多选框无效
多选框（input[type="checkbox"] 或 input[type="radio"]）本身是行内替换元素，Bootstrap 将其包裹在 form-check 容器里，并通过 form-check-input 和 form-check-label 分离控件与文字。直接把多个 form-check 塞进 row 会导致：
-
form-check默认display: block，不加干预时即使放进col也会独占一行 -
col的宽度计算受内部块级内容影响，文字长短不一会让各列高度不一致，视觉上“没对齐” -
align-items-center加在row上只影响col的垂直位置，不控制form-check内部的基线对齐
用 d-flex + flex-wrap 替代 row
更轻量、语义更准的方案：把多选框组设为 Flex 容器，让每个 form-check 成为弹性子项，自动换行且对齐基线。
关键点：
- 外层用
div class="d-flex flex-wrap gap-2"，不用row—— 避免网格系统对块级行为的干扰 - 每个
form-check直接作为子元素，不包col——form-check自身已含足够样式 - 加
gap-2控制间距，比手动写me-3更稳定（gap不影响第一/末项外边距） - 若需响应式断点控制每行数量，用
flex-sm-nowrap/flex-md-wrap等类微调换行时机
示例：
<div class="d-flex flex-wrap gap-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1"><label class="form-check-label" for="check1">选项一</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check2"><label class="form-check-label" for="check2">长一点的选项二</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check3"><label class="form-check-label" for="check3">三</label>
</div>
</div>
单行强制等宽对齐（如按钮式多选）
当需要类似按钮组的效果（比如“全部/未读/已读”筛选），且要求所有选项视觉宽度一致、文字居中、高度统一，就不能依赖 form-check 的默认结构。
做法：
- 弃用
form-check，改用btn-group或自定义btn+data-checked - 若必须保留原生 checkbox 语义（例如表单提交），可用
position: absolute隐藏原生控件，用btn模拟 UI，再用 JS 同步状态 - 绝对不要给
form-check-label加text-center或w-100—— 它会撑开容器，破坏form-check-input的定位基准
对齐失效时优先检查这三点
绝大多数“排列混乱”问题其实和类名无关，而是 DOM 结构或样式污染导致：
-
form-check外层被额外div包裹，且该div有margin或padding—— 这些值会叠加到 flex 子项的尺寸计算中 - 全局 CSS 或第三方插件重置了
input[type="checkbox"]的vertical-align或width，导致基线偏移 - 用了
form-switch却混在普通form-check中 —— 它的结构和尺寸完全不同，不能并排使用
真正要对齐的从来不是“多选框本身”，而是用户看到的那块可点击区域和文字的相对位置；盯着 input 标签调样式，不如直接约束 form-check 容器的行为。
