ASP.NET MVC：在同一行上对齐复选框和标签

Question

The label ("Acid-stable amino acids") and checkbox are on different lines in my ASP.NET Core MVC application. (Sample ID is irrelevant here.) I would like them to be on the same line. Current misaligned output:

The field from the model:

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

The Razor view (removing most other irrelevant elements):

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

I've tried a few things recommended in similar questions. Using inline-block display right before the label:

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

                </style>

Or modifying the label or checkbox types in the site.css file:

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

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

or

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

I've tried changing to "form-horizontal".

Nothing changes the alignment of checkbox and label. Any input would be appreciated. Floating the checkbox may be a solution but I'm not sure how to do that. Relevant SO questions: here , here , here .

edit: rendered HTML--

Answer 1

you can apply css like

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

Answer 2

From Bootstrap v4.0 and higher you can use:

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

This is a cleaner solution if you're already using Bootstrap, because you don't need to write additional CSS.

Note: The 'form-group' class is optional, but it gives nicer spacing if used in a form.