3

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

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

小提琴: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>

问题图片

4

2 回答 2

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>
于 2013-06-28T17:26:11.377 回答
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>
于 2013-06-28T17:41:30.963 回答