如何使用Bootstrap为复选框设置合理间距？

嘿，我来帮你搞定这个复选框过于紧凑的问题！其实你的代码里有两个小细节需要调整，咱们一步步来修正：

1. 用Bootstrap官方类快速解决（推荐） #

Bootstrap本身提供了form-check-inline类，专门用来让复选框/单选框横向排列并自带合适的间距。你需要把每个复选框+标签的组合单独放在一个form-check容器里，再加上这个类：

<div class="form-group">
  <label for="">Repetir?</label>
  <div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="segunda">
      <label class="form-check-label" for="segunda">Segunda</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="terca">
      <label class="form-check-label" for="terca">Terça</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="quarta">
      <label class="form-check-label" for="quarta">Quarta</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="quinta">
      <label class="form-check-label" for="quinta">Quinta</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="sexta">
      <label class="form-check-label" for="sexta">Sexta</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="sabado">
      <label class="form-check-label" for="sabado">Sábado</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="domingo">
      <label class="form-check-label" for="domingo">Domingo</label>
    </div>
  </div>
</div>

2. 额外提醒：修复重复的ID #

你原来的代码里所有复选框的id都是segunda，这会导致点击标签时只会关联第一个复选框，一定要给每个复选框设置唯一的ID，并且让label的for属性对应上，这样标签和复选框的关联才正常哦。

3. 自定义CSS方案（如果不想改结构） #

如果你不想调整HTML结构，也可以通过自定义CSS来给复选框添加间距：

.form-check-input {
  margin-right: 0.5rem;
  /* 给每个复选框右侧添加小间距 */
}
.form-check-label {
  margin-right: 1rem;
  /* 给每个标签右侧添加更大间距，区分不同选项 */
}

这样修改后，你的复选框就会有舒适的间距啦！

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