如何在Bootstrap开关控件两侧实现文本对齐？

针对你在PC端后台管理面板中遇到的开关Checkbox与两侧文本无法同行的问题，可以利用Bootstrap的flex工具类快速实现布局，无需额外自定义CSS。以下是调整后的完整可运行代码：

<div class="container mt-4">
  <div class="row">
    <div class="col-md-6">
      <!-- 顶部标签 -->
      <label class="form-label mb-2">通知开关设置</label>
      <!-- 开关与两侧文本的容器，使用flex实现横向排列+垂直居中 -->
      <div class="d-flex align-items-center gap-3">
        <span>关闭状态</span>
        <!-- Bootstrap开关Checkbox -->
        <div class="form-switch">
          <input class="form-check-input" type="checkbox" id="notifySwitch">
          <label class="form-check-label" for="notifySwitch"></label>
        </div>
        <span>开启状态</span>
      </div>
    </div>
  </div>
</div>

关键布局说明： #

• d-flex将容器设置为弹性布局，强制内部元素横向排列
• align-items-center确保文本与开关垂直居中对齐，避免出现错位
• gap-3控制元素间的间距（可根据需求调整gap-1到gap-5）
• 保留Bootstrap原生form-switch组件，保证开关样式的一致性

这种方案完全依托Bootstrap内置工具类，适配你已采用的col/row布局体系，无需额外编写CSS规则，完美适配PC端后台场景。

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