如何实现两个图标与toggle-switch复选框的左右对齐？

问题出在默认的form-switch布局没用到弹性布局来横向排列元素，用float反而会破坏原有布局导致重叠。直接用Bootstrap的flex类就能解决：

修改后的代码：

<div class="d-flex">
  <div class="form-check form-switch d-flex align-items-center">
    <label class="form-check-label me-3" for="lightSwitch" fill="currentColor">
      <i class="bi bi-brightness-high-fill"></i>
    </label>
    <input class="form-check-input bg-dark border border-secondary" type="checkbox" id="lightSwitch" />
    <label class="form-check-label ms-3" for="lightSwitch" fill="currentColor">
      <i class="bi bi-moon-fill"></i>
    </label>
  </div>
</div>

关键调整点：

• 给.form-check加上d-flex align-items-center，让内部图标、开关垂直居中且横向排列，这是核心修复步骤。
• 把左侧图标的ms-3（左间距）改成me-3（右间距），配合右侧图标的ms-3，给开关两侧留出足够空间，避免重叠。

如果觉得间距或尺寸不合适，还可以自定义调整：

/* 可选：调整开关大小或图标尺寸 */
.form-check-input {
  width: 4.5rem;
  height: 2.2rem;
}
.form-check-label {
  font-size: 1.2rem;
}

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