html - 隐藏的输入弄乱了网格

Question

我正在使用 twitter bootstrap 来设计我的管理面板，但这是非常奇怪的行为。我已经在 Chrome 28 和 Firefox 中进行了测试，当我添加一个简单的隐藏输入时它会弄乱网格。

如果您将隐藏的输入移到 div.span6 中或将其完全删除，它将按预期工作，但如果它留在那里，行会折叠并且无法正常工作。我所说的恰当是指它们应该彼此相邻，而不是在顶部。

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

Answer 1

推类row-fluid在<form>标记通常是不好的做法，因为您总是以一行结束，而您最终可能需要在代码中多于一行。

示例在 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>