ASP.NET MVC: выровнять флажок и метку на одной строке

Question

Метка («Кислотоустойчивые аминокислоты») и флажок находятся в разных строках в моем приложении ASP.NET Core MVC.(Идентификатор образца здесь не имеет значения.) Я бы хотел, чтобы они были на одной линии.Текущий смещенный выход:

Поле из модели:

[Display(Name = "Acid-stable amino acids")]
        public bool AcidStables { get; set; }

Вид Razor (удаляет большинство других несущественных элементов):

<div class="row">
    <div class="col-md-6">
        <form asp-action="Create">

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

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

Я попробовал несколько вещей, рекомендованных в подобных вопросах.Использование отображения встроенного блока непосредственно перед меткой:

<div class="checkbox">
                <style type="text/css">
                    label {
                        display: inline-block;
                    }

                </style>

Или изменение типа метки или флажков в файле site.css:

.label {
    display: inline;
    font-size: 1.2em;
    font-weight: 600;
    padding: 5px;
}

input[type=checkbox] {
    float: left;
    margin-right: 0.4em;
}

или

​input[type=checkbox] + label {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 2em;
    line-height: 1em;
}

Я пытался изменить на "form-Horizontal".

Ничто не меняет выравнивания флажка и метки.Любой вклад будет оценен.Плавающий флажок может быть решением, но я не уверен, как это сделать.Соответствующие вопросы SO: здесь , здесь , здесь .

редактировать: визуализированный HTML--

Answer 1

Вы можете применить css как

.checkbox .control-label{
   float:left;
   width:40%;
}
.checkbox input[type="checkbox"]{
   float:left;
   width:60%;
}
.checkbox:after{
   content:'';
   display:block;
   clear:both;
}

Answer 2

В Bootstrap v4.0 и выше вы можете использовать:

<div class="form-group form-check">
    <label asp-for="AcidStables" class="form-check-label"></label>
    <input asp-for="AcidStables" class="form-check-input"/>
    <span asp-validation-for="AcidStables" class="text-danger"></span>
</div>

Это более чистое решение, если вы уже используете Bootstrap, потому что вам не нужно писать дополнительный CSS.

Примечание: класс 'form-group' является необязательным, но при использовании в форме он дает лучший интервал.