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

【问题标题】：ASP.NET MVC: Align checkbox and label on same lineASP.NET MVC：在同一行对齐复选框和标签
【发布时间】：2019-09-18 18:36:40
【问题描述】：

标签（“酸性稳定氨基酸”）和复选框位于我的 ASP.NET Core MVC 应用程序中的不同行。（样品 ID 在这里无关紧要。）我希望他们在同一行。当前未对齐的输出：

模型中的字段：

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

我尝试了一些类似问题中推荐的方法。在标签前使用 inline-block 显示：

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

                </style>

或者修改site.css文件中的label或者checkbox类型：

.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 问题：here、here、here。

编辑：呈现 HTML--

【问题讨论】：

你使用什么版本的引导程序？
在_Layout.cshtml文件中，stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/…
你能发布关于input[type=checkbox]的代码
对不起，我不确定你的意思？
在您发布的代码中，我看不到type="checkbox" 的任何输入

标签： c# html css asp.net-mvc razor

【解决方案1】：

你可以申请csslike

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

【讨论】：

@לבנימלכה 当然是的，但是检查器图像中没有任何引导程序 4 类，因此我们可以对其应用浮动。
遗憾的是没有变化；即使是“float:right”也没什么区别。
@heds1 好的，你要添加的 css 应用了吗？
您的评论为我指明了正确的方向 :) 原来我的浏览器正在使用缓存的 site.css 文件，所以我必须清除缓存并重新启动浏览器，并且修复了它。非常感谢。

【解决方案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' 类是可选的，但如果在表单中使用，它会提供更好的间距。

【讨论】：