9

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

4

3 回答 3

6

使用谷歌浏览器的 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>

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

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

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

所以用这个例如：

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

希望这可以帮助。

于 2012-08-15T19:42:25.227 回答
6

是因为你有一个 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 中）

祝你好运，我希望它有助于欢呼，Gmo.-

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

于 2012-08-15T20:03:55.027 回答
3

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

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

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

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

DIV 上方的隐藏输入

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

隐藏在 DIV 上方

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

于 2012-08-15T20:11:50.327 回答