事業部是彼此重疊

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。