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

我需要使用一个隐藏的输入来为每个块向页面传输一些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：

---

在第285行附近，使用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>

例如：

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

---

希望这有帮助。

是因为您有一个css规则（在bootstrap.min.css文件中）与默认的\u shipping\u box div中的第一个子元素相匹配（但仅当有一个类*=“span”）

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

因此，如果将隐藏输入放在div#default(默认)shipping(装运)框中的第一个跨距之前，则该规则不会设置div.span1的样式，这就是模板受到影响的原因

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

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

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

祝你好运，我希望这会有所帮助 干杯 转基因生物-

编辑： 太慢了。

---

在写作时回答。。。我同意上面解释的原因。

引导有一些CSS，如果类包含

span

，则会将第一个子类的

左边距设置为0：

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

当隐藏输入置于第一个
span
div上方时，上述
左边距为0属性将不被应用

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


这表明，当隐藏输入位于div之后时，没有左边距


编辑：我似乎已经被打败了两次，而我正在得到截图来说明差异
 你能创建一个能在行动中显示这一点的模型吗？@JoshMein我想，但我不知道如何保持我的布局和东西？这就是为什么我上传了一张照片。你确定这就是你要改变的一切吗？这“不应该”有什么不同。您正在哪个浏览器中查看它？你试过不同的浏览器看它是否有相同的效果吗？@Gravitate是的，我肯定。我可以通过移动输入来重新创建错误。。。Google Chrome最新版本21.0.1180.77 m.@DavidBélanger如果你把你的css包括在小提琴中，你应该不会有任何问题，也许在这个过程中你会发现你真正的问题。是的，我看到了。。我编辑了我的，当你编辑的时候，把已经回答过的放进去。xd；干杯
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }