自举行重叠

Question

我想使页面有两个部分堆叠在彼此的顶部使用行。每个部分应该是浏览器窗口的高度，但由于某种原因，除了标题外，第二行与第一行的大部分重叠。

这里是我的代码的链接： http://www.bootply.com/WwcepyZC01

Answer 1

如果我正确理解你的问题，你可以做到这一点使用height: 100vh，并删除position: absolute。我也重构了一下你的HTML，所以.layer2是而不是.layer1的孩子。

.layer1 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url(<%=asset_path "home_bg.jpg"%>); 
 
    background-size: cover; 
 
    background-color: purple; 
 
} 
 
.title-wide h1 { 
 
    top: 10%; 
 
    left: 10%; 
 
    right: 10%; 
 
    color: #ffffff; 
 
    font-size: 10vmax; 
 
} 
 
.home-caption { 
 
    position: absolute; 
 
    left: 20%; 
 
    right: 20%; 
 
    top: 30%; 
 
} 
 
.title-wide h2 { 
 
    color: #ffffff; 
 
    font-size: 4vmax; 
 
} 
 
.col-md-7 { 
 
    position: absolute; 
 
    text-align: center; 
 
    left: 15%; 
 
    right: 15%; 
 
    height: 100%; 
 
    top: 50%; 
 
    font-size: 10vw; 
 
} 
 
.btn-default { 
 
    background: rgba(255, 255, 255, 0.8); 
 
} 
 
.title-wide { 
 
    left: 90%; 
 
    right: 90%; 
 
} 
 
.btn-xlarge { 
 
    padding: 20px 20px; 
 
    font-weight: 700; 
 
    line-height: normal; 
 
    border-radius: 200px; 
 
    border: 2px solid none; 
 
    text-align: center center; 
 
    height: 3em; 
 
    font-size: 25px; 
 
    width: 10em; 
 
} 
 
.layer2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-size: cover; 
 
    background-color: green; 
 
}

<div class="layer1 row-fluid"> 
 
    <div class="title-wide text-center"> 
 
    <h1>My Name</h1> 
 
    <div class="home-caption text-center"> 
 
     <h2>I am a person working for a nameless corporation</h2> 
 
     <div class="row"> 
 
     <hr> 
 
     <div class="offset4"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="layer2 row-fluid"> 
 

 
</div> 
 

 

 
<div id="push"></div>