使用Razor布局错误定位复选框

Question

我正忙着使用Core 2 MVC应用程序，IsAdmin是bool，以下是Razor标记：

<div class="form-group">
    <label asp-for="IsAdmin" style="display: inline-block;"></label>
    <input asp-for="IsAdmin" class="form-control" />
    <span asp-validation-for="IsAdmin" class="text-danger"></span>
</div>

无论屏幕如何，它都会在下图中呈现，form-group，宽度：

我唯一的自定义CSS全部用于id选择的元素，与表单布局无关。我甚至尝试使标签display: inline-block无济于事。这有什么不对？

如何实现与标签内联的复选框？

Answer 1

您的问题是由于没有实际添加Bootstrap所需的HTML，CSS类等复选框。在我重新提出你的问题之前，你没有指定你正在使用哪个版本的Bootstrap（或者你 使用Bootstrap），所以这里有两个不同的选项：

<强> Bootstrap 4

<div class="form-check">
    <input class="form-check-input" asp-for="IsAdmin" />
    <label class="form-check-label" asp-for="IsAdmin"></label>
</div>

<强> Bootstrap 3

<div class="checkbox">
    <label>
        <input type="checkbox" asp-for="IsAdmin" />
        @Html.DisplayNameFor(x => x.IsAdmin)
    </label>
</div>