ASP.NET MVC：在同一行上對齊復選框和標簽

Question

標簽（“酸穩定的氨基酸”）和復選框在我的ASP.NET Core MVC應用程序中的不同行上。 （此處與樣品ID無關。）我希望它們位於同一行。 電流未對准輸出：

來自模型的字段：

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

剃刀視圖（刪除了大多數其他不相關的元素）：

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

我嘗試過更改為“水平形式”。

沒有任何改變復選框和標簽的對齊方式。 任何輸入將不勝感激。 浮動復選框可能是一種解決方案，但是我不確定如何做到這一點。 相關的問題： 這里 ， 這里 ， 這里 。

編輯：呈現的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”類是可選的，但如果在表單中使用，則可以提供更好的間距。