移动端复选框错位求助：Bootstrap 4下复选框居中于文本下方

嘿，这个问题我之前碰到好多次啦，Bootstrap 4的复选框在平板、移动端出现偏移甚至居中到文本下方，大概率是这几个点没做好，咱们一个个来排查：

1. 先确认是否遵循了Bootstrap 4的复选框规范结构 #

Bootstrap 4对表单组件有严格的类名和结构要求，要是你自己瞎改了结构或者漏了必要的类，响应式样式直接就失效了。正确的复选框结构应该是这样的：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="yourCheckboxId">
  <label class="form-check-label" for="yourCheckboxId">
    你的复选框文本
  </label>
</div>

重点是：必须把复选框和标签放在带form-check类的容器里，复选框加form-check-input，标签加form-check-label，还要保证for属性和复选框的id对应。如果你的结构不是这样，先改成规范结构试试，很多时候问题直接就解决了。

2. 排查自定义CSS是否覆盖了Bootstrap的默认样式 #

很多人会自己写CSS调整表单样式，一不小心就把Bootstrap的响应式布局冲掉了。比如给复选框加了position: absolute、不合理的margin/padding，或者在媒体查询（比如@media (max-width: 768px)）里给父容器加了text-center之类的居中样式，都会导致复选框偏移。

你可以用浏览器的开发者工具（按F12），选中复选框元素，查看它的样式面板，看看有没有自定义的样式优先级比Bootstrap高（比如带!important的），把这些冲突的样式删掉或者调整优先级。

3. 检查父容器的布局类是否合理 #

要是复选框所在的父容器用了比如text-center、justify-content-center这类全局居中的类，在移动端断点下可能会强制让所有元素居中，包括复选框。你可以给父容器针对不同断点设置不同的类，比如在桌面端用text-left，移动端保持默认，或者直接去掉不必要的居中类。

4. 排除jQuery脚本的影响 #

你提到用了jQuery 3.3.1，有没有写过动态修改复选框样式或位置的代码？比如用$(selector).css()设置了left、top这类定位属性，在响应式切换的时候可能没做适配，导致偏移。可以暂时注释掉jQuery相关的表单操作代码，看看问题是否消失，以此排查是不是脚本的锅。

按照这几步排查下来，基本就能找到问题所在啦，大部分情况都是结构不规范或者自定义样式冲突导致的。

内容的提问来源于stack exchange，提问作者user6673915