Question

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

如果您将隐藏的输入移动到div.span6或将其完全删除，它将按预期工作，但如果它停留在那里，则行会崩溃并且无法正常工作。正确地说，我的意思是他们应该彼此相邻，而不是在最顶层。

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

Problem picture

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>

Answer 2

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

隐藏的输入正在搞乱网格

2 个答案: