Question

我试图制作一个引导表格页面，但我在前端吮吸。

我的问题很简单：如何分隔这些复选框？

<div class="form-group">
    <label for="">Repetir?</label>
    <div class="form-check">
         <input type="checkbox" class="form-check-input" id="segunda">
         <label class="form-check-label">Segunda</label>

          <input type="checkbox" class="form-check-input" id="segunda">
          <label class="form-check-label">Terça</label>

          <input type="checkbox" class="form-check-input" id="segunda">
          <label class="form-check-label">Quarta</label>

          <input type="checkbox" class="form-check-input" id="segunda">
          <label class="form-check-label">Quinta</label>

          <input type="checkbox" class="form-check-input" id="segunda">
          <label class="form-check-label">Sexta</label>

          <input type="checkbox" class="form-check-input" id="segunda">
          <label class="form-check-label">Sábado</label>

          <input type="checkbox" class="form-check-input" id="segunda">
          <label class="form-check-label">Domingo</label>
      </div>
 </div>

以下是结果图：

他们非常接近。谢谢

Answer 1

您可以使用左边距（ml-x），右边距（mr-x）或左边填充（pl-x），右边填充（pr-x）bootstrap-4类或者阿尔法。其中x是任何数字（1,2,3等）。

e.g。 pl-1或pr-2

Refer here

使用bootstrap-3，您可以编写自己的简单类：

.ml-1 {
  margin-left: 4px !important;
}

Answer 2

如果您想要自定义布局，使用网格系统应该是一个选项。只需使用.form-row代替.form-check并将复选框包装到。

中

<div class="form-group container">

  <div class="form-row">

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda1">
      <label class="form-check-label">Segunda</label>
    </div>

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda2">
      <label class="form-check-label">Terça</label>
    </div>

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda3">
      <label class="form-check-label">Quarta</label>
    </div>

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda4">
      <label class="-form-check-label">Quinta</label>
    </div>

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda5">
      <label class="form-check-label" style="border:1px">Sexta</label>
    </div>

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda6">
      <label class="form-check-label">Sábado</label>
    </div>

    <div class="col-3">
      <input type="checkbox" class="form-check-input" id="segunda7">
      <label class="form-check-label">Domingo</label>
    </div>

  </div>
</div>

这是一个小提琴：https://jsfiddle.net/5wgyjd9n/

Answer 3

您可以在每个输入类型复选框标记

之后添加m标记并将其添加到代码中

的CSS：

slider.numberFormatter = HeightFormatter()

你的其余代码是这样的： html的：

m { margin:20px }

希望这能回答你的问题。

Answer 4

看来你正试图让它们保持水平。您可以简单地向.form-check-label添加右边距，如下所示：

.form-group .form-check .form-check-label{
  margin-right: 25px;
}

.form-group .form-check .form-check-label:last-child{
  margin-right: 0;
}

以下是codepen

如何用bootstrap空间两个复选框？

4 个答案: