Bootstrap 4 - Left aligning a large checkbox

Question

Bootstrap 4.

<div class="form-group">
    <label asp-for="Enabled" class="control-label"></label>
    <input asp-for="Enabled" class="form-control" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
</div>

I have a form (see image). I would like the check box to be underneath the word "Enabled" not centred like the other full width controls.

If I set "width: auto;" on the checkbox, this does the job, but then displays a small checkbox (I want a large one). See image.

<div class="form-group">
    <label asp-for="Enabled" class="control-label"></label>
    <input asp-for="Enabled" class="form-control" style="width: auto;" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
</div>

My question is, how can I get a large left aligned checkbox on my form?

Answer 1

我之前也搜索过同样的问题，但对上述答案不满意，这就是为什么我进行了研究并找到了一个很好的解决方案。只需在输入标签中添加类“col-sm-1”即可。

<div class="col-8">
   <input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
   <span asp-validation-for="IsUrgent" class="text-danger" />
</div>