Question

我需要使用隐藏的输入将一些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>

不遵守布局。请参阅此图片了解说明：

enter image description here

有人可以向我解释原因吗？隐藏输入不应该被“隐藏”，因此它们不应该影响布局？

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

第285行附近

Answer 1

使用Google Chrome的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;
}

希望这有帮助。

Answer 2

是因为你有一个css规则（在bootstrap.min.css文件中）与default_shipping_box div中的firs-child元素匹配（但只有在* =“span”时才有）。

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

因此，如果您将隐藏输入放在 div＃default_shipping_box 中并且在第一个范围之前，那么该规则不会为 div.span1 <设置样式/ strong>这就是为什么你的模板受到了影响。

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

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

重要的是，因为你有更多的文件支持这个规则（例如，在bootstrap-responsive.min.css中）
祝你好运，我希望它有所帮助干杯， GMO .-

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

Answer 3

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

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

如果隐藏的输入位于第一个span div之上，则不会应用上述margin-left: 0;属性。

下图显示当隐藏输入之前时，第一个span类具有左边距。

这表明当隐藏输入

之后时，没有左边距。

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

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

3 个答案: