使用 Bootstrap 在两列中显示复选框

Question

我正在使用Bootstrap在两列中显示复选框。简短的例子：

<fieldset class="col-lg-6 col-md-12">
   <label>
      <input type="checkbox" />
      <span>Here is the text</span>
   </label>
</fieldset>

这是两列中的复选框的图像。 在图像中，您可以看到“交通”复选框比其他复选框低得多。

在某些屏幕尺寸下，如何防止复选框之间出现空白？我无法更改显示标签及其内部范围的方式，但我可以向它们添加类。

Answer 1

你只需要添加这个CSS：

ul {
  column-count: 2;
  column-gap: 2rem;
  list-style: none;
}

对您的 HTML 进行了一些更改

<div class = "container">
  <div class="row">
    <div class="col-12">
      <ul>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>



       </ul>
    </div>
  </div>
</div>