ASP.Net MVC Helper 破坏 Foundation Zurb答案

【问题标题】：ASP.Net MVC Helper Breaks Foundation ZurbASP.Net MVC Helper 破坏 Foundation Zurb
【发布时间】：2015-05-21 16:39:12
【问题描述】：

我对 MVC 帮助程序 CheckboxFor 有一个问题。我发现生成的 HTML 代码创建了一个隐藏字段，并且破坏了基础 zurb 的样式。

我在视图上使用这个助手：

@Html.CheckBoxFor(model => model.Client.Contact.IsLocked)
@Html.LabelFor(model => model.Client.Contact.IsLocked)

而生成的代码就是这个：

<input data-val="true" data-val-required="The Is Locked field is required." id="Client_IsLocked" name="Client.IsLocked" type="checkbox" value="true"><input name="Client.IsLocked" type="hidden" value="false">
<label or="Client_IsLocked">Is Locked</label>

看起来隐藏字段导致标签未与复选框对齐。有什么建议吗？

【问题讨论】：

隐藏的输入对您的布局没有任何作用。它不是由任何浏览器呈现的，因此对布局没有影响。还有一些其他问题，但没有更多信息，我们无能为力。我建议发布更多你的视图代码，这样我们就可以有一些上下文，也许还有截图，这样我们就可以看到问题。
隐藏的输入导致破坏了标签与复选框的默认对齐方式。我知道，因为如果我在浏览器的编辑器中删除它会按预期呈现。
什么浏览器？这是非常不正常的，因为隐藏的输入不是布局元素。它们在渲染中根本没有考虑在内。
我在 Chrome 和 Firefox 中遇到了同样的问题。我找到了我的问题的答案。谢谢你，克里斯。
请考虑将您得到的答案作为实际答案发布。

标签： asp.net-mvc html zurb-foundation asp.net-mvc-helpers

【解决方案1】：

我找到了我的问题的答案。原因是基础的css的复选框和标签的选择器，它没有包含隐藏字段的选择器。快速修复，只需将此选择器添加到项目的 css 文件中：

input[type="checkbox"] + input[type="hidden"] + label,
    input[type="radio"] + input[type="hidden"] + label {
      display: inline-block !important;
    }

【讨论】：

或input[type="checkbox"] ~ label { .... }，如果您将@CheckBoxFor() 和@LabelFor() 包装在包含<div> 的元素中