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

【问题标题】：Bootstrap 4 custom-checkbox same format as text input?Bootstrap 4自定义复选框与文本输入格式相同？
【发布时间】：2018-06-25 21:02:10
【问题描述】：

我有这样的 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

【问题讨论】：

标签： html css twitter-bootstrap checkbox bootstrap-4

【解决方案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>

【讨论】：