html 中开关下的重叠文本

Question

我想在我的网站上添加一个选择器开关，但左侧的标签重叠在开关下方。关于如何解决此问题的任何想法，以便两个标签（文本）完美分布在开关的每一侧？

我的代码：

    <div class="row mb-4">
      <div class="col text-center">
        <div class="custom-control custom-switch mx-auto justify-content-center align-items-center" style="height: 40px;">
          <label class="align-self-start" style="margin: 0 5px;">Solo el periodo</label>
          <input type="checkbox" class="custom-control-input" id="acumulado-switch" checked>
          <label class="custom-control-label" style="margin: 0 5px;">Acumulado</label>
        </div>
      </div>

Answer 1

您可以增加左侧或右侧标签的边距以补偿开关的宽度。

<div class="row mb-4">
  <div class="col text-center">
    <div class="custom-control custom-switch mx-auto justify-content-center align-items-center" style="height: 40px;">
      <label class="align-self-start" style="margin: 0 5px;">Solo el periodo</label>
      <input type="checkbox" class="custom-control-input" id="acumulado-switch" checked>
      <label class="custom-control-label" style="margin: 0 5px 0 35px;">Acumulado</label>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">