我有一个非常简单的Bootstrap,有两个全屏部分:
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Roald Dahl</h1>
<p class="intro-text">100th anniversary of Roald Dahl's birth
<br>World's No.1 storyteller</p>
<a href="#timeline" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="timeline" class="container-fluid content-section">
<div class="row">
<iframe src='http://roalddahl.tk/TMcompiled/timeline.html' style="width: 100%; height: 100%; position: absolute; border:0px solid lightgrey;" frameborder='1'></iframe>
</div>
</section>
我想在iframe之后再添加一个部分,如下所示:
<section id="bibliography" class="container content-section">
<div class="row">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
<a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">Visit Download Page</a>
</div>
</div>
</div>
</div>
</section>
问题是,我的第三部分的所有内容都会进入ifarme内容之上的iframe部分下方的iframe部分而非其下方。
一些CSS:
}
.intro {
display: table;
width: 100%;
padding: 100px 0;
margin: 0px;
text-align: center;
color: black;
background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
background-color: pink;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
}
.colorcolor {
background-color: red;
}
.content-section {
padding-right: 20px;
margin-left: 15px;
height: auto;
}
我的第三部分无法正确查看我的iframe并将所有内容放在介绍的正下方但我不确定如何使其正常工作。 是否可以在不修改iframe secton的情况下添加下一部分?