Bootstrap行重叠

Question

我正在尝试创建一个页面，其中有两个部分使用行堆叠在一起。每个部分应该是浏览器窗口的高度，但由于某种原因，除了标题之外，第二行与第一行的大部分重叠。

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

Answer 1

如果我正确理解您的问题，您可以使用height: 100vh执行此操作，然后移除position: absolute。我还对您的HTML进行了重新调整，以便.layer2 不是.layer1的孩子。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;