隐藏的输入搞乱了网格

Posted 2023-03-05

【中文标题】隐藏的输入搞乱了网格

【英文标题】：Hidden input is messing up grid

【发布时间】：2013-06-26 13:22:59

【问题描述】：

我正在使用 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>

【参考方案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>

【讨论】：

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

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

skmasq，没有意义。 display: none 应该完全阻止它被渲染，因此不占用任何空间。我会理解某处是否有 visibility: hidden 规则，但没有显示应该意味着对布局没有影响。

@sellmeadog 完全同意你的看法。

【参考方案2】：

如果您移动隐藏字段 (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>

【讨论】：

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

很高兴它成功了。我说我不知道​​为什么隐藏字段的位置会影响布局，而不是为什么你需要使用一个。更新了我的答案以澄清。