ASP.NET MVC：对齐同一行复选框和标签(ASP.NET MVC: Align checkbo

标签（“酸稳定氨基酸”）和复选框是在我的ASP.NET 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>

我已经试过类似的问题，推荐几件事情。使用inline-block的显示标签的前面：

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

我试图更改为“形横”。

没有什么变化复选框和标签的对齐方式。任何输入，将不胜感激。浮动复选框可能是一个解决方案，但我不知道该怎么做。相关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:

从引导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>

这是如果你已经在使用引导程序，因为你并不需要编写额外的CSS一个清晰的解决方案。

注意：“形式的基团”类是可选的，但如果在一个形式使用它给更好间距。