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

你需要让你的div这样排成一排：

<div class = "container">
  <div class="row">
    <fieldset class="col-sm-6">
      <label>
        <input type="checkbox" />
        <span>Here is the text</span>
      </label>
    </fieldset>
    <fieldset class="col-sm-6">
      <label>
        <input type="checkbox" />
        <span>Here is the text</span>
      </label>
    </fieldset>
  </div>
</div>

Answer 2

您只需要添加以下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>

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

2 个答案: