HTML自定义开关控件左侧文本重叠问题的解决咨询

你当前遇到的问题是Bootstrap自定义开关的左右标签与开关出现重叠，无法实现两侧文本在开关左右整齐分布的效果，示意图如下：

问题出在两个核心点：一是未正确启用Flex布局来排列元素，二是Bootstrap的custom-switch组件结构不符合规范，导致布局错乱。

以下是修正后的代码，能完美实现你要的效果：

<div class="row mb-4">
  <div class="col text-center">
    <!-- 外层容器添加d-flex启用Flex布局，保证元素横向排列且垂直居中 -->
    <div class="d-flex mx-auto justify-content-center align-items-center" style="height: 40px;">
      <!-- 左侧普通标签，用align-self-center保证垂直居中 -->
      <label style="margin: 0 10px;" class="align-self-center">Solo el periodo</label>
      <!-- 正确的custom-switch结构：input和对应的label必须包裹在custom-control容器内 -->
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="acumulado-switch" checked>
        <label class="custom-control-label" for="acumulado-switch"></label>
      </div>
      <!-- 右侧标签 -->
      <label style="margin: 0 10px;" class="align-self-center">Acumulado</label>
    </div>
  </div>
</div>

关键修改点：

• 启用Flex布局：给外层容器添加d-flex类，Bootstrap的justify-content-center和align-items-center必须配合d-flex才能生效，确保内部元素横向排列且垂直居中。
• 修正组件结构：原代码错误地将custom-control-label当作右侧文本使用，实际上这个标签是Bootstrap用来渲染开关样式的容器，需要单独创建普通标签作为左右侧的说明文本。
• 优化对齐与边距：用align-self-center保证标签与开关垂直对齐，调整左右边距避免元素拥挤重叠。

如果需要进一步定制样式（如字体大小、开关尺寸），直接修改对应元素的CSS类或行内样式即可。

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