为什么隐藏的输入会影响我的布局？低频解释答案

【问题标题】：Why hidden input is affecting my layout? LF Explanation为什么隐藏的输入会影响我的布局？低频解释
【发布时间】：2012-08-12 02:15:24
【问题描述】：

我需要使用隐藏输入将一些 ID 传输到每个块的页面.. 无论如何。

我有以下代码：

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <div class="span1">
            <input type="hidden" name="tracking_id" value="" />
        </div>
    </div>
</div>

这段代码运行良好，结果符合我的预期。

如果我这样做：

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">

        </div>
    </div>
</div>

布局不受尊重。请参阅此图片进行演示：

有人可以向我解释为什么吗？隐藏的输入不应该被“隐藏”，所以它们不应该影响布局？

jsfiddle：http://jsfiddle.net/t9M3C/

285 号线附近

【问题讨论】：

你能创建一个jsfiddle 来展示这个操作吗？
@JoshMein 我想，但我不知道如何保持我的布局和东西......？这就是我上传图片的原因。
您确定这就是您要更改的全部内容吗？它“不应该”有所作为。你用什么浏览器看的？有没有试过换个浏览器看看效果一样吗？
@Gravitate 是的，我确定。我只需移动输入即可重新创建错误... Google Chrome 最新版本 21.0.1180.77 m。
@DavidBélanger 如果你在 fiddle 中包含你的 css，你应该没有问题重新创建问题，也许在这个过程中你会发现你真正的问题。

标签： php html css input

【解决方案1】：

是因为你有一个 css 规则（在 bootstrap.min.css 文件中）匹配 default_shipping_box div 中的 firs-child 元素（但前提是有一个 class*="span"）。

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

因此，如果您将 隐藏输入 放在 div#default_shipping_box 中并在第一个跨度之前，则该规则不会设置 div.span1 这就是您的模板受到影响的原因。

您可以修复在同一个文件中添加一个简单的 css 规则...

.row-fluid .span1{margin-left:0 !important;}

重要的是，您有更多的文件覆盖了这条规则（例如在 bootstrap-responsive.min.css 中）

祝你好运，希望对你有帮助干杯，转基因-

编辑：太慢了XD 写的时候回答...我同意上面解释的原因。

【讨论】：

是的，我已经看到了.. 我编辑了我的，而您正在编辑已经回答的问题。 XDXD;干杯

【解决方案2】：

使用谷歌浏览器的 Inspest 插件，当你移动这个类的输入时：

.row-fluid [class*="span"]:first-child {
     margin-left: 0;
}

被删除。

这是因为在这个：

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">
        </div>
    </div>
</div>

这个：<div class="span1"> 不是第一个孩子，这个：<input type="hidden" name="tracking_id" value="" /> 是。

在你的 CSS 中，[class*="span"] 的默认类是：

[class*="span"] {
    float: left;
    margin-left: 30px;
}

所以以这个为例：

.row-fluid .span1 {
    margin-left:0 !important;
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

Bootstrap 有一些 CSS 会将第一个孩子的 left-margin 设置为 0，如果该类包含 span：

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }

当隐藏输入放在第一个span div之上时，上面的margin-left: 0;属性将不会被应用。

下图显示当隐藏输入是before时，那么第一个span类有左边距。

这表明当隐藏输入在 div之后，没有左边距。

编辑：我似乎被打了两次，而我正在获取屏幕截图来说明差异！

【讨论】：