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