Firefox 中使用 Bootstrap 的负边距答案

【问题标题】：Negative Margin in Firefox Using BootstrapFirefox 中使用 Bootstrap 的负边距
【发布时间】：2013-08-10 13:28:41
【问题描述】：

我正在使用 Twitter Bootstrap 插件，目前主要是网格系统。

我正在尝试将一行放在另一行之上，为响应式设计做一些事情。

在 Chrome 中这非常有效：

<div class="container">
    <div class="row">
        <div class="content">
            abcd
        </div>
    </div>
    <div class="row" id="moveUpRow">
        <div class="content">
            efgh
        </div>
    </div>
</div>

CSS：

.row {
    height: 200px;
}

#moveUpRow {
    margin-top: -200px;
}

但在 Firefox 和 IE 中，它们都忽略了负边距。我试过top: -200px，但这只是向上移动row，而不是行下的所有元素。留下大片空白。

此问题的任何其他解决方案？或者关于如何“拉”行下方的任何内容的任何建议？

【问题讨论】：

你为什么要这样做？
因为我有两种背景颜色跨越两个不同的行，我试图让它们的一部分重叠。所以我想看看这是否可能。如果是，那就太好了。如果没有，我会尝试其他方法。
仍然没有真正得到你想要做的事情，但如果你让#moveUpRow { position:absolute; } 它下面的内容不会被下推。
尝试插入!important，风格类似于margin-top: -200px !important;
@PiLHA 已经尝试过了。没有运气。

标签： html css internet-explorer firefox twitter-bootstrap

【解决方案1】：

我遇到了同样的问题。在我的情况下，我的第一行中有两个浮动元素，所以当我在第二行放置负边距时，它会移动整行。奇怪的是，它在 Chrome 中运行良好，但在 Firefox 中却不行。

尝试添加溢出：隐藏；如果是这种情况，请移至该行。

【讨论】：

【解决方案2】：

您发布的 HTML 和 CSS 在 Firefox 和 IE 中对我来说看起来不错，请参阅 http://www.bootply.com/72944

也许您可以先仔细检查您的 CSS 文件的路径，并确保您页面上的 HTML 没有其他问题？

祝你好运！

【讨论】：