隐藏输入框破坏了网格布局。

Question

我正在使用Twitter Bootstrap来为我的管理面板添加样式，但是它的行为非常奇怪。我已经在Chrome 28和Firefox中进行了测试，当我添加一个简单的隐藏输入时，它会破坏网格。

如果将隐藏输入移动到

中或完全删除它，则它将按预期工作，但如果保留在那里，则行会崩溃并且无法正常工作。正常情况下，它们应该相邻而不是重叠在一起。

示例：http://jsfiddle.net/EZMvB/

<div class="container-fluid">
    <form action="/admin/category/create" class="row-fluid" method="post">
        <input type="hidden" name="WAT" value="WAT" />
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
    </form>
</div>

- Stan

Answer 1

如果移动隐藏字段（http://jsfiddle.net/EZMvB/1/），似乎按预期工作。不确定为什么位置很重要，因为display: none的默认样式应该防止它影响布局？

<div class="container-fluid">
    <form action="/admin/category/create" class="row-fluid" method="post">
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <div class="span6">
            <label for="NameEnglish">Name (English)</label>
            <input class="input-block-level" name="NameEnglish" type="text">
        </div>
        <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
        <input type="hidden" name="WAT" value="WAT" />
    </form>
</div>

- sellmeadog

---

隐藏字段代表防伪令牌。谢谢，这解决了问题。 - Stan

很高兴它起作用了。我是在说我不知道为什么隐藏字段的位置会影响布局，而不是你为什么需要使用它。我更新了我的答案以澄清这一点。 - sellmeadog

Answer 2

在一般情况下，在<form>标签中放置类row-fluid是不好的实践，因为你总是最终只有一行，而你可能需要在代码中使用多行。

示例在jsFiddle中。

代码：

<form action="/admin/category/create"  method="post" novalidate="novalidate">
    <input type="hidden" />
    <div class="row-fluid" >
         <div class="span6">
             <label for="NameEnglish">Name (English)</label>
             <input class="input-block-level" data-val="true" data-val-required="'Name English' should not be empty." id="NameEnglish" name="NameEnglish" type="text" value="">
         </div>
         <div class="span6">
             <label for="NameEnglish">Name (English)</label>
             <input class="input-block-level" id="NameEnglish" name="NameEnglish" type="text" value="">
         </div>
             <input type="submit" value="Create" class="btn btn-large btn-primary pull-right">
   </div>
</form>

- skmasq

---

skmasq，你知道为什么一个隐藏的字段会影响row-fluid布局吗？ - sellmeadog

@sellmeadog 即使它的默认值是 display: none，input 元素在 DOM 中占用了一些非常小的空间，你可以看到如果将宽度 % 最小化到 46 而不是 48，它将正常工作。为什么会这样，我不知道。 - skmasq

skmasq，没有意义。display: none应该阻止它被渲染，因此不会占用任何空间。如果有一个visibility: hidden的规则，我可以理解，但是没有显示应该对布局没有影响。 - sellmeadog

@sellmeadog，我完全同意你的观点。 - skmasq