事业部是彼此重叠

Question

我想添加其他部分的超大屏幕下，但由于某种原因，重叠的超大屏幕..

这里是我的代码

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类，您还应该分配要占用的列来定义其宽度。将col-lg-12或带有jumbotron类的行分配给包装div。