html - 是什么导致我的 Bootstrap col 在中间断点处有大顶部 'margin'？

Question

在这里查看 fiddle :https://jsfiddle.net/ged47t3u/1/

这可能是一个 position: absolute; 问题。

我有一个包含 2 个元素的“col-md-8”。第一个位于第二个之上并且具有position:absolute和 z-indexapplied。第二个元素有一个很大的 margin-top。期望的效果是第一个元素位于第二个元素的一半以上，请参见图片:

这工作正常，直到屏幕尺寸达到 Bootstraps Medium 断点 @media (max-width: 992px)。在那一点上，红色元素被向下插入绿色。

我看不到检查器中元素的任何 css 更改。这让我难住了。我可以在该断点处应用负 top 值，但它似乎不正确。

有人知道这里发生了什么吗？

Answer 1

看起来这种行为是由这种 Bootstrap 风格引起的:

@media (min-width: 992px)
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
}

我猜测 float 值导致元素折叠到 .content 元素的边距。当 float 被移除时，边距崩溃就消失了。

来自 MDN 的 Mastering margin collapsing :

Parent and first/last child If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.