基于Bootstrap实现网格状标签与复选框布局的问题咨询

先修正原代码的基础错误 #

原代码存在以下问题，会导致交互失效：

• 复选框id重复（check1_Opt2出现两次），DOM中id必须唯一
• 部分label的for属性指向错误，无法正确关联对应复选框
• 未设置网格布局规则，元素默认垂直排列

方式一：Bootstrap 网格实现 #

利用Bootstrap的栅格系统（row + col）快速构建网格布局，同时保留自定义复选框样式：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-size:1.5em;
      color: #2b2b2b;
      background:white;
      padding: 2rem;
    }
    .label-check input { display:none; }

    .label-check label::before {
      content: "\2610"; /* 未选中的复选框符号 */
      width: 1.4em;
      text-align: center;
      display: inline-block;
      cursor: pointer;
      color: black;
      transition: color .3s ease;
      text-shadow: 0px 0px 1px #cccccc;
      margin-right: 0.5rem;
    }
    .label-check label:hover::before {
      text-shadow: 0px 0px 1px #6286d0;
    }
    .label-check [type='checkbox']:checked + label::before { 
      content: "\2611"; /* 选中的复选框符号 */
      color: #056dce;
    }
    .option-item {
      display: flex;
      align-items: center;
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="label-check">
    <p class="mb-3">File Type</p>
    <div class="row g-3">
      <!-- 每行3列，可根据需求调整col的类，比如col-4、col-md-2等 -->
      <div class="col-4">
        <div class="option-item">
          <input type="checkbox" name="checkGrp1" id="check1_Opt1">
          <label for="check1_Opt1">jpg</label>
          <span class="ms-2">2</span>
        </div>
      </div>
      <div class="col-4">
        <div class="option-item">
          <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
          <label for="check1_Opt2">pdf</label>
          <span class="ms-2">4</span>
        </div>
      </div>
      <div class="col-4">
        <div class="option-item">
          <input type="checkbox" name="checkGrp1" id="check1_Opt3" checked>
          <label for="check1_Opt3">mp4</label>
          <span class="ms-2">6</span>
        </div>
      </div>
    </div>
  </div>

  <hr class="my-4">

  <div class="label-check">
    <p class="mb-3">Orientation</p>
    <div class="row g-3">
      <div class="col-4">
        <div class="option-item">
          <input type="checkbox" name="orientGrp" id="orient1">
          <label for="orient1">Horizontal</label>
          <span class="ms-2">&#10696;</span>
        </div>
      </div>
      <div class="col-4">
        <div class="option-item">
          <input type="checkbox" name="orientGrp" id="orient2">
          <label for="orient2">Vertical</label>
          <span class="ms-2">&#10696;</span>
        </div>
      </div>
      <div class="col-4">
        <div class="option-item">
          <input type="checkbox" name="orientGrp" id="orient3">
          <label for="orient3">Square</label>
          <span class="ms-2">&#10696;</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 可选：引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键说明： #

• 使用Bootstrap的row和col-4实现每行3个选项的网格布局，可通过修改col-*类调整列数（比如col-3是每行4个）
• 修正了复选框id和label的关联问题，用<span>替代多余的label来显示数字/箭头（一个复选框仅需一个关联label）
• 给自定义复选框添加content属性，显示未选中/选中的符号，解决原代码无复选框视觉标识的问题

方式二：纯HTML+CSS 网格实现 #

如果不想依赖Bootstrap，用CSS Grid实现同样的布局：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-size:1.5em;
      color: #2b2b2b;
      background:white;
      padding: 2rem;
    }
    .label-check input { display:none; }

    .label-check label::before {
      content: "\2610";
      width: 1.4em;
      text-align: center;
      display: inline-block;
      cursor: pointer;
      color: black;
      transition: color .3s ease;
      text-shadow: 0px 0px 1px #cccccc;
      margin-right: 0.5rem;
    }
    .label-check label:hover::before {
      text-shadow: 0px 0px 1px #6286d0;
    }
    .label-check [type='checkbox']:checked + label::before { 
      content: "\2611";
      color: #056dce;
    }
    .option-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 每行3列，可修改数字调整 */
      gap: 1rem; /* 选项之间的间距 */
    }
    .option-item {
      display: flex;
      align-items: center;
    }
    .option-item span {
      margin-left: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="label-check">
    <p class="mb-3">File Type</p>
    <div class="option-grid">
      <div class="option-item">
        <input type="checkbox" name="checkGrp1" id="check1_Opt1">
        <label for="check1_Opt1">jpg</label>
        <span>2</span>
      </div>
      <div class="option-item">
        <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
        <label for="check1_Opt2">pdf</label>
        <span>4</span>
      </div>
      <div class="option-item">
        <input type="checkbox" name="checkGrp1" id="check1_Opt3" checked>
        <label for="check1_Opt3">mp4</label>
        <span>6</span>
      </div>
    </div>
  </div>

  <hr class="my-4">

  <div class="label-check">
    <p class="mb-3">Orientation</p>
    <div class="option-grid">
      <div class="option-item">
        <input type="checkbox" name="orientGrp" id="orient1">
        <label for="orient1">Horizontal</label>
        <span>&#10696;</span>
      </div>
      <div class="option-item">
        <input type="checkbox" name="orientGrp" id="orient2">
        <label for="orient2">Vertical</label>
        <span>&#10696;</span>
      </div>
      <div class="option-item">
        <input type="checkbox" name="orientGrp" id="orient3">
        <label for="orient3">Square</label>
        <span>&#10696;</span>
      </div>
    </div>
  </div>
</body>
</html>

关键说明： #

• 使用grid-template-columns: repeat(3, 1fr)创建等宽的3列网格，repeat(4, 1fr)则是4列
• 通过gap属性控制网格项之间的间距
• 同样修正了id和label的关联问题，用<span>显示附加内容，避免多个label关联同一个复选框的错误

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