Question

我有这样的Bootrap 4文本输入

<div class="col-2 form-group">
    <label for="follow">Följande</label>
    <input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
    <div class="invalid-feedback">
        Vänligen fyll i Följande.
    </div>
</div>

我希望复选框标签的垂直高度与文本输入相同，而复选框的垂直高度和大小与文本输入相同。我试图交换输入和标签代码，但没有任何效果。

带有自定义复选框的复选框代码。

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check</label>
</div>

I have it like this

But want it like this

Answer 1

您应该将包装盒正确地包装在容器中

<div class="container">
  <div class="row">
    <div class="col-sm-4 form-group">
      <label for="follow">Följande</label>
    <input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
    <div class="invalid-feedback">
        Vänligen fyll i Följande.
    </div>
    </div>

    <div class="col-sm-4 form-group">
    <label for="follow">Check</label>
    <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1"></label>
    </div>
    </div>

     </div>
  </div>

Bootstrap 4自定义复选框与文本输入的格式相同吗？

1 个答案: