Bootstrap 4 - Выравнивание по левому краю большого флажка

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>

У меня есть форма (см. Изображение). Я хотел бы, чтобы флажок был под словом «Включен», а не по центру, как другие элементы управления полной ширины.

Если я установлю «ширина: авто;» на флажок, это делает работу, но затем отображает маленький флажок (я хочу большой). См. Изображение.

<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>

Мой вопрос: как я могу получить большой флажок с выравниванием по левому краю в моей форме?

Answer 1

вы также можете использовать это, если вы не удовлетворены именем класса

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none; /* if you want check inside box then remove this line*/
  appearance: none; /* if you want check inside box then remove this line*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <label asp-for="Enabled" class="control-label">Enabled</label>
    <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
  </div>
</form>

Answer 2

Это не аккуратно, установив высоту и ширину для флажка следует сделать свое дело.

.checkbox-large {
  width: 25px !important;
  height: 25px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <label asp-for="Enabled" class="control-label">Enabled</label>
    <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
  </div>
</form>