html - Bootstrap 3 列内的相对 div 不受尊重

Question

对于 Bootstrap 3 内的 relative div，我有一个奇怪的行为柱子。我的标记是:

<div class="col-lg-6">
    <div class="large" style="background: url(img/bg.jpg);">
        <h1 class="grid-header">Content 1</h1>
    </div>
</div>

和

.large {
    height: 963px;
    background: grey;
    margin: 15px 0px;
    position: relative;
}

.grid-header {
    font-size: 48px;
    color: #FFFFFF;
    margin: 22px 0 0 22px;
}

我不知道为什么，.grid-header 的 margin 在 .large 中不起作用。它的所有边距都适用于主体，而不适用于其父元素。

有什么我不记得的会影响 Bootstrap 列内的相对布局。

谢谢

Answer 1

此问题称为 margin-collpasing

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

在这种情况下， parent 和第一个 child

Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with 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 with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

所以你可以通过添加这个来修复它:

.large {
   padding-top:1px;
}

检查这个BootplyDemo