如何更改Razor CheckboxFor对齐方式

Question

Visual Studio 2013中的标准ASP.NET MVC模板生成一个页面Register.cshtml，用于定义用于将新用户注册到系统的UI。我将其扩展为添加“我接受条款”的复选框。以下是代码段：

<div class="form-group">
    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
            @Html.CheckBoxFor(m => m.AcceptTerms, new { @class = "form-control" })
            @Html.Label("I accept", new { @class = "control-label" })
    </div>
</div>

这个想法是chexkbox显示在密码编辑框下方。文本必须显示在复选框的右侧。

以下是输出外观的部分图像：

如您所见，复选框正在居中对齐，“我接受”正在流向下一行。

如何将复选框和标签放在一起并确保复选框与其上方的编辑框左对齐？问候。

Answer 1

这样做......

<label>
I accept

@Html.CheckBoxFor(m => m.AcceptTerms)
</label>

Answer 2

试试这个......希望这会有所帮助

<div class="checkbox">
    @Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { @class = "form-control pull-left" } })
</div>

Answer 3

似乎＆＃39;标签＆＃39;或/和input type="checkbox"的显示类型为block。

要快速检查，请尝试向style="display: inline-block"和Label添加CheckBoxFor。如果我没错，那么你可以更正.css文件。