当使用Bootstrap和MVC5没有附带标签时,复选框输入严重对齐

Question

Bootply玩

当使用布尔值构建模型的编辑视图时,Visual Studio 2013会生成以下CSHTML:

<div class="form-group">
    @Html.LabelFor(model => model.IsUrgent, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="checkbox">
            @Html.EditorFor(model => model.IsUrgent)
         </div>
    </div>
</div>

经过Razor之后,你得到了这个:

<div class="form-group">
  <label class="control-label col-md-2" for="IsUrgent">Is bad :(</label>
   <div class="col-md-10">
    <div class="checkbox">
      <input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkbox" value="true">
      <input name="IsUrgent" type="hidden" value="false">
    </div>
  </div>
</div>

然而,Twitter Bootstrap 3.2不喜欢这种使用标签的方式,因为这是结果:

请注意,该复选框位于左侧太多位置.

如果我将输入包装在带有一些空格的虚拟标签中,即.

<div class="form-group">
    <label class="control-label col-md-2" for="IsUrgent">Is good!</label>

    <div class="col-md-10">
      <div class="checkbox">
        <label><input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkbox" value="true">
        <input name="IsUrgent" type="hidden" value="false">&nbsp;</label>
      </div>
    </div>
</div>

我明白了:

看起来不错,但它不是有效的HTML:

label元素最多可包含一个input,button,select,textarea或keygen后代.

我的CSS课程有问题吗？

编辑

如果我将第二个移动到@Saranga input之外,那么label我仍然留下了label没有语义功能的冗余...

Answer 1

<div class="checkbox">
    <label>
        @Html.CheckBoxFor(model => model.IsUrgent)
        @Html.DisplayNameFor(model => model.IsUrgent)
    </label>
</div>

Answer 2

而不是@Html.EditorFor(model => model.IsUrgent)添加以下代码.您可以将隐藏字段放在label标记之外.

<div class="checkbox">
    <label>
        <input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" value="true" type="checkbox"> &nbsp;
    </label>
    <input name="IsUrgent" type="hidden" value="false">
</div>

DEMO

谢谢!

Answer 3

我实现了一个 Html Helper CheckBoxForBootstrap，它将复选框放在标签中，但没有任何标签文本，因此没有多余的标签，但您仍然可以获得所需的格式。mvc模型绑定器所需的隐藏字段添加在标签之后，它应该是有效的html。

public static MvcHtmlString CheckBoxForBootstrap(this HtmlHelper htmlHelper, 
        string name, 
        bool isChecked)
{

    TagBuilder checkbox = new TagBuilder("input");
    checkbox.Attributes.Add("type", "checkbox");
    checkbox.Attributes.Add("name", name);
    checkbox.Attributes.Add("id", name);
    checkbox.Attributes.Add("data-val", "true");
    checkbox.Attributes.Add("value", "true");
    if (isChecked)
        checkbox.Attributes.Add("checked", "checked");

    TagBuilder label = new TagBuilder("label");
    //nest the checkbox inside the label
    label.InnerHtml = checkbox.ToString(TagRenderMode.Normal);

    TagBuilder hidden = new TagBuilder("input");
    hidden.Attributes.Add("type", "hidden");
    hidden.Attributes.Add("name", name);
    hidden.Attributes.Add("value", "false");

    return MvcHtmlString.Create(
    label.ToString(TagRenderMode.Normal) 
    + hidden.ToString(TagRenderMode.Normal)
    );
}