CSS 当没有使用 Bootstrap 和 MVC5 的随附标签时，复选框输入未对齐

Checkbox inputs badly aligned when there's no accompanying label using Bootstrap and MVC5

提问by janv8000

Bootply to play with

Bootply 玩

Visual Studio 2013 generates the following CSHTML when scaffolding an edit view for a model with a boolean:

当使用布尔值构建模型的编辑视图时，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>

After passing through Razor you get this:

通过 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 however doesn't like this way of using labels because this is the result:

然而，Twitter Bootstrap 3.2 不喜欢这种使用标签的方式，因为结果如下：

Note that the checkbox is positioned too much to the left.

请注意，复选框的位置太靠左了。

If I wrap my input in a dummy label with some whitespace, ie.

如果我用一些空格将我的输入包装在一个虚拟标签中，即。

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

I get this:

我明白了：

which looks nice but it's not valid HTML:

看起来不错，但它不是有效的 HTML：

The label element may contain at most one input, button, select, textarea, or keygen descendant.

label 元素最多可以包含一个 input、button、select、textarea 或 keygen 后代。

Am I doing something wrong with my CSS classes?

我的 CSS 类有问题吗？

Edit

编辑

If I move the second inputoutside of the labelas @Saranga suggests I'm still left with the redundant labelthat serves no semantic function ...

如果我像@Saranga 建议input的label那样将第二个移到外面，我仍然会留下label没有语义功能的冗余......

采纳答案by Joe Audette

I implemented an Html Helper CheckBoxForBootstrap that puts the checkbox in a label but without any label text so there is no redundant label but you still get the desired formatting. The hidden field needed by mvc model binder is added after the label to it should be valid html.

我实现了一个 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)
    );
}

回答by David Morissette

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

回答by Saranga

Instead of @Html.EditorFor(model => model.IsUrgent)add following code. You can put the hidden field outside the labeltag.

而不是@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

演示

Thanks!

谢谢！

回答by Everton Z. P.

<div class="checkbox" style="margin: 5px 0 0 0;">
    <label for="remember" style="margin: 0;">
        <input name="remember" id="remember" type="checkbox" style="margin-top: 2px;">
        Remember me
    </label>
</div>

DEMO

演示

回答by DavidC

Warning: Solution with CSS

警告：使用 CSS 的解决方案

I solved it this way:

我是这样解决的：

<div class="form-group">
    @Html.LabelFor(m => m.IsRequired2, new { @class = "control-label col-md-2" })
    <div class="col-md-2 checkbox-form">
        @Html.CheckBoxFor(m => m.IsRequired2)
    </div>
</div>

Using this CSS class:

使用这个 CSS 类：

.checkbox-form {
    padding-top: 5px;
}

Which generates this:

产生这个：

<div class="form-group">
    <label for="IsRequired2" class="control-label col-md-2">Good!</label>

    <div class="col-md-2 checkbox-form">
      <input value="true" name="IsRequired2" id="IsRequired2" type="checkbox">
      <input value="false" name="IsRequired2" type="hidden">
    </div>
</div>

As can be seen here, it has the advantage of not adding extra vertical space before or after the checkbox line.

从这里可以看出，它的优点是不会在复选框行之前或之后添加额外的垂直空间。

回答by Pasilda

I had the same issue, and just changed the class on the div immediately surrounding the checkbox. Try:

我遇到了同样的问题，只是在复选框周围立即更改了 div 上的类。尝试：

    <div class="form-control-static">
        @Html.EditorFor(model => model.IsUrgent)
     </div>

回答by Hovhannes Bantikyan

you can try some code I have shared on my github account : icheck-bootstrap

你可以试试我在我的 github 账户上分享的一些代码：icheck-bootstrap

You can see demo here:

你可以在这里看到演示：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/9bd0c21a/icheck-bootstrap.min.css" />


<div class="checkbox icheck-primary">
    <input type="checkbox" id="someCheckboxId1" />
    <label for="someCheckboxId1">Clieck to check</label>
</div>

<div class="checkbox icheck-wisteria">
    <input type="checkbox" id="someCheckboxId2" />
    <label for="someCheckboxId2">Clieck to check</label>
</div>

回答by mamashare

just remove the div whith the "checkbox" class sorrounding your'e checkbox and label and the problem will go away

只需删除围绕您的复选框和标签的“复选框”类的 div，问题就会消失

回答by Arvis

        <div class="form-group">
            <div class="checkbox">
                <div class="col-sm-2">
                    @Html.DisplayNameFor(m => m.IsUrgent)
                </div>
                <div class="col-sm-10">
                    <label>
                        @Html.CheckBoxFor(m => m.IsUrgent)
                    </label>
                </div>
            </div>
        </div> 

and reverse order

并倒序

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            @Html.CheckBoxFor(m => m.IsUrgent)
                            @Html.DisplayNameFor(m => m.IsUrgent)
                        </label>
                    </div>
                </div>
            </div>