是什么导致我的Bootstrap col在中断点处具有较大的顶部“边距”？

Question

请参阅此处的小提琴：https://jsfiddle.net/ged47t3u/1/

这可能是position: absolute;问题。

我有一个带有2个元素的'col-md-8'。第一个是在第二个上面，并且有位置：绝对和z-indexapplied。第二个元素有一个大的边缘顶部。期望的效果是第一个元素位于第二个元素的一半以上，请参见image：

此工作正常，直到屏幕大小达到Bootstraps Medium break point @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元素的边距折叠。移除浮动后，边距崩溃消失。

来自MDN的Mastering margin collapsing：

  

父母和第一个/最后一个孩子   如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或最大值 - 高度将块的边缘底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

Answer 2

您是否尝试在position:absolute;中添加.content，如下面的代码？

.content {
width: 100%;
background-color: green;
height: 300px;
margin-top: 110px;
position:absolute; // this
}