Bootstrap 4表单复选框列对齐实现方案咨询

没问题！Bootstrap 4 完全可以帮你把这些复选框改成多列布局，这里有两种实用的方法，同时我也会修正你代码里的一个小问题（所有复选框id重复了，这会导致标签点击失效哦）：

方法一：利用Bootstrap栅格系统手动分组 #

这种方法适合你希望精确控制每列数量的场景，通过Bootstrap的row和col类来划分列：

修改后的Selections部分代码如下：

<div class="form-group row">
  <div class="col-sm-2">Selections</div>
  <div class="col-sm-10">
    <!-- 第一行3列 -->
    <div class="row mb-2">
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-1" value="Hot Food">
          <label class="form-check-label" for="footTypes-1"> Hot Food </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-2" value="Retail">
          <label class="form-check-label" for="footTypes-2"> Retail </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-3" value="Affordable">
          <label class="form-check-label" for="footTypes-3"> Affordable </label>
        </div>
      </div>
    </div>
    <!-- 第二行3列 -->
    <div class="row mb-2">
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-4" value="Canteen">
          <label class="form-check-label" for="footTypes-4"> Canteen </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-5" value="At Home">
          <label class="form-check-label" for="footTypes-5"> At Home </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-6" value="Residential">
          <label class="form-check-label" for="footTypes-6"> Residential </label>
        </div>
      </div>
    </div>
    <!-- 后续行同理，按需添加 -->
    <div class="row">
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-7" value="Hospitality">
          <label class="form-check-label" for="footTypes-7"> Hospitality </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-8" value="Supermarket">
          <label class="form-check-label" for="footTypes-8"> Supermarket </label>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-9" value="Education">
          <label class="form-check-label" for="footTypes-9"> Education </label>
        </div>
      </div>
    </div>
    <!-- 剩下的选项继续按这个结构添加即可 -->
  </div>
</div>

方法二：用CSS列布局自动分栏 #

如果你的选项非常多，不想手动分组，可以用CSS的column-count属性实现自动分栏，这种方法更灵活：

首先添加自定义CSS：

.checkbox-columns {
  column-count: 3; /* 设置为3列，可根据需求调整 */
  column-gap: 2rem; /* 列之间的间距 */
}
.checkbox-columns .form-check {
  break-inside: avoid; /* 避免单个复选框被拆分到两列 */
  margin-bottom: 0.5rem;
}

然后修改HTML部分：

<div class="form-group row">
  <div class="col-sm-2">Selections</div>
  <div class="col-sm-10 checkbox-columns">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-1" value="Hot Food">
      <label class="form-check-label" for="footTypes-1"> Hot Food </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-2" value="Retail">
      <label class="form-check-label" for="footTypes-2"> Retail </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes-3" value="Affordable">
      <label class="form-check-label" for="footTypes-3"> Affordable </label>
    </div>
    <!-- 剩下的所有复选框都按这个格式添加，不用手动分组 -->
  </div>
</div>

重要提示 #

原代码中所有复选框的id都是footTypes，这违反了HTML规范（每个元素的id必须唯一），会导致点击标签时只有第一个复选框响应。所以我在修改后的代码里把id改成了footTypes-1、footTypes-2这种唯一值，同时对应的label的for属性也做了对应修改，一定要注意这一点哦！

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