Div彼此重叠

Question

我正在尝试在jumbotron下添加另一个部分，但由于某种原因它与jumbotron重叠..

这是我的代码

http://www.bootply.com/IUd0GWEuAn

Answer 1

部分重叠，因为您已在jumbotron上应用了position: absolute。 absolute或fixed的元素从DOM的正常流中取出，因此它们与其他元素重叠。您可以将navbar设置为position: absolute而不是jumbotron，它会起作用。

示例代码

<nav class="navbar">
     // navigation
</navbar>
<div class="jumbotron">
    // jumbotron
</div>
<div class="next-section">
    // next section
</div>

body {
    position: relative;
}

.navbar {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0;
}

.jumbotron {
    height: 100vh;
    width: 100%;
}

.next-section {
  // styling will go here...
}

我已经更新了你的代码，看看它。您可以使用CSS来完全根据您的需要进行制作。 Link

Answer 2

尝试在上方栏后面放置<div style="clear:both"></div>。

Answer 3

jumbotron是一类对文本产生影响的boostrap，你还应该分配列来定义它的width.assign col-lg-12或用jumbotron类行到包装div。