如何实现复选框4列水平对齐，解决数量少时的排版不协调问题？

需求是让复选框按4列水平对齐，当前使用自定义inline-table样式实现，但存在兼容性问题：当复选框数量超过10个时显示正常，数量较少时（如仅3个），布局渲染不协调。

原实现代码 #

<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TEST</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </head>
  <body>
     <div class="row">
        <div class="col-md-12">
            <form action='' method="POST" novalidate>
                <div>
                    <div>
                        <label>GROUP 1</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_1" name="0_1">
                        <label for="0_1">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_2" name="0_2">
                        <label for="0_2">CK1_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_3</label>
                          </div>
                    </div>
                    </div>
            <br/>
                    <div>
                        <label>GROUP 2</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_1" name="1_1">
                        <label for="1_1">CK2_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_2" name="1_2">
                        <label for="1_2">CK2_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_3" name="1_3">
                        <label for="1_3">CK2_3</label>
                          </div>
                        </div>
                    </div>
                </div>       
         </form>
        </div>
     </div>
  </body>
</html>

问题原因 #

原代码使用display: table和inline-table布局，当复选框数量较少时，外层table容器不会自动占满父元素宽度，导致内部每个25%宽度的子容器实际宽度偏小，布局显得拥挤不协调。

优化方案：使用Bootstrap原生网格系统 #

直接利用Bootstrap的row和col类实现4列布局，无需自定义table样式，不管复选框数量多少都能保持一致的25%宽度对齐。

修改后的代码

<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TEST</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </head>
  <body>
     <div class="row">
        <div class="col-md-12">
            <form action='' method="POST" novalidate>
                <div class="mb-3">
                    <label class="form-label">GROUP 1</label>
                    <div class="row gx-2 gy-1">
                      <div class="col-sm-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="0_1" name="0_1">
                          <label class="form-check-label" for="0_1">CK1_1</label>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="0_2" name="0_2">
                          <label class="form-check-label" for="0_2">CK1_2</label>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="0_3" name="0_3">
                          <label class="form-check-label" for="0_3">CK1_3</label>
                        </div>
                      </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">GROUP 2</label>
                    <div class="row gx-2 gy-1">
                      <div class="col-sm-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="1_1" name="1_1">
                          <label class="form-check-label" for="1_1">CK2_1</label>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="1_2" name="1_2">
                          <label class="form-check-label" for="1_2">CK2_2</label>
                        </div>
                      </div>
                      <div class="col-sm-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="1_3" name="1_3">
                          <label class="form-check-label" for="1_3">CK2_3</label>
                        </div>
                      </div>
                    </div>
                </div>       
         </form>
        </div>
     </div>
  </body>
</html>

优化说明 #

1. 用Bootstrap的row替代自定义的display: table容器，每个复选框包裹在col-sm-3中（12列网格系统中，3列刚好是25%宽度，实现4列布局）
2. 使用form-check类优化复选框和标签的对齐，符合Bootstrap的表单规范
3. 通过gx-2和gy-1设置列间距和行间距，替代自定义的margin样式，保持布局一致性
4. 添加mb-3类给每个分组设置底部间距，提升视觉层次感

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