Bootstrap 5.3开关组件覆盖左侧标签的问题如何解决？

针对你遇到的两个问题（左侧国旗被开关覆盖、右侧国旗未对齐），基于Bootstrap 5.3可以通过调整结构和内置类解决，无需额外自定义CSS：

• 给外层容器添加align-items-center类，确保所有内容垂直居中对齐
• 给左侧国旗的label添加me-2类，拉开和开关的间距，避免被覆盖
• 给两个label都添加align-middle类，保证图标和开关在同一轴线
• 把开关组件嵌套进标准的form-check form-switch容器，避免默认样式冲突

修改后的完整代码：

<div class="form-group position-absolute top-0 start-50 translate-middle-x z-3 bg-dark row justify-content-start align-items-center">
  <label class="form-check-label align-middle me-2" for="flexSwitchCheckDefault">
    <img src="img/gb.svg" width="16" height="16" viewBox="0 0 16 16" />
  </label>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  </div>
  <label class="form-check-label align-middle ms-2" for="flexSwitchCheckDefault">
    <img src="img/fr.svg" width="16" height="16" viewBox="0 0 16 16" />
  </label>
</div>

关键改动说明： #

1. 外层row添加align-items-center：让行内所有元素垂直居中，解决右侧国旗和开关不对齐的问题
2. 左侧label加me-2：给左侧国旗和开关之间添加右侧外边距，避免开关的默认绝对定位覆盖国旗
3. 两个label加align-middle：强制图标和开关的垂直中线对齐，保证视觉上的轴线统一
4. 开关嵌套进form-check form-switch：还原Bootstrap开关组件的标准结构，避免默认样式引发的布局冲突

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