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

Question

我使用 Bootstrap 在两列中显示复选框。简短示例:

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

这是一张图片 the checkboxes in two columns在图像中，您可以看到“交通”复选框比其他复选框低得多。

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

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>