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

Posted 2023-03-06

【中文标题】当没有使用 Bootstrap 和 MVC5 的随附标签时，复选框输入严重对齐

【英文标题】：Checkbox inputs badly aligned when there's no accompanying label using Bootstrap and MVC5

【发布时间】：2014-09-05 15:03:58

【问题描述】：

Bootply to play with

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 类有什么问题吗？

编辑

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

【问题讨论】：

在site.css文件中包含规则是否有问题：.checkbox > input[type=checkbox] margin-left:0; ?

【参考方案1】：

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

【讨论】：

这将产生无效的 HTML，即。 label 元素最多可以包含一个 input、button、select、textarea 或 keygen 后代。

【参考方案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

谢谢！

【讨论】：

遗憾的是，MVC 模型绑定器需要隐藏字段 :(。这就是 @Html.EditorFor(model => model.IsUrgent) 输出它们的原因

没错，但我仍然坚持多余的label

我认为这不是多余的，因为在bootstrap中，我们将文本定义在复选框的末尾（getbootstrap.com/css/#forms），但是在您的情况下，您需要将标签保留在前面.所以我们需要带有  的标签才能使bootstrap 样式起作用。所以我们可以使用这种方法作为替代方法。谢谢！

【参考方案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)
    );

【参考方案4】：

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

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

【讨论】：

一个标签点击后会将焦点移到输入框，这个解决方案不会

【参考方案5】：

警告：使用 CSS 的解决方案

我是这样解决的：

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

使用这个 CSS 类：

.checkbox-form 
    padding-top: 5px;

生成这个：

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

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

【参考方案6】：

<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

【讨论】：

此解决方案将标签放在复选框的右侧

【参考方案7】：

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

您可以在此处查看演示：

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

【讨论】：

你链接的css超过24KB

【参考方案8】：

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

【参考方案9】：

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

倒序

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

【讨论】：

这将产生无效的 HTML，即。 label 元素最多可以包含一个 input、button、select、textarea 或 keygen 后代。