我正在使用 Bootstrap 创建一个单页网站，但是当我将页面大小调整为移动尺寸时，内容开始重叠，我在使用 Bootstrap 时从未遇到过这种情况，这是正在发生的事情:
这是我的主要 html 文件:
<!DOCTYPE html>
<html>
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>#######</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link href="css/animate.css"rel="stylesheet">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation <a class="navbar-brand page-scroll" href="#page-top"><img src="img/logo2.png"></a>
======================================================================================= -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img alt="Brand" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header
=================================================================================== -->
<header>
<div class="headerMain">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<h1>#######</h1>
<hr>
<h2>BlahBlah This is a place holder</h2>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- About Us
===================================================================================-->
<section id="section-one" class="section-one">
<div class="container">
<div class="row">
<div class="col-lg-6 vline">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
</div>
<div class="col-lg-6">
<h3>Other Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
</div>
</div>
</div>
</section>
<section id="section-two" class="section-two">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>Who are we?</h3>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>#######</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
<div class="col-lg-6">
<img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt="">
<h4>Paresh Parmar</h4>
<p>What does this team member to? Keep it short! This is also a great spot for social links!</p>
</div>
</div>
</div>
</section>
<!-- Services
===================================================================================-->
<section id="section-three" class="section-three">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Section Three</h1>
</div>
</div>
<div id="map">
</div>
</div>
</section>
<!-- Contact Form
===================================================================================-->
<section id="section-four" class="section-four">
<div class="container">
<div class="row col-md-1">
</div>
</div>
</section>
<!-- footer
==================================================================================-->
<footer class="footer-distributed">
<div class="footer-left">
<img src="img/logo.png"/>
<br>
<br>
<p class="footer-company-name">Ice7Media © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>102 Colmore Row</span> Bimringham, England</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>+44 121 227 2681</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:support@ice7media.com">support@ice7media.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.</p>
<div class="footer-icons">
<a href="https://www.facebook.com/Ice7Media?fref=ts"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/ice7media"><i class="fa fa-twitter"></i></a>
<a href="https://www.linkedin.com/company/2828305?trk=tyah&trkInfo=clickedVertical%3Acompany%2CclickedEntityId%3A2828305%2Cidx%3A1-1-1%2CtarId%3A1441201531235%2Ctas%3Aice7"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</footer>
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
</html>/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
*/
/* Global Styles
============================================================ */
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
}
p {
font-family: 'Open Sans', sans-serif;
}
/* Navbar Style
============================================================ */
@media(min-width:767px) {
.navbar {
padding: 20px 0;
background-color: #474747;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000;
}
/* Header
=======================================================*/
.headerMain{
background-image: url(../img/Bimringham-Skyline.jpeg);
background-size: cover;
padding-top: 100px;
padding-bottom: 215px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.headOther{
margin-top: -25px;
text-align: center;
background-color: #23282d;
padding-top: 100px;
padding-bottom: 575px;
}
header h1 {
display: block;
text-align: center;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 2.5em;
font-weight: 600;
color: #fff;
}
hr {
display: block;
text-align: center;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-color: #fff;
}
header h2 {
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
font-weight: 500;
color: #fff;
}
/* Section Formatting
======================================================== */
.section-one {
height: 40%;
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
#section-one h2, h3, h4, p {
color: #fff;
}
.vline:nth-of-type(1){
border-right: 2px solid #474747;
}
.img-center {
margin: 0 auto;
}
.section-two {
height: 110%;
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
.section-three {
height: 100%;
padding-top: 250px;
text-align: center;
background: #ebebeb;
}
.section-four {
height: 100%;
padding-top: 250px;
text-align: center;
background: #6d6d6d;
}
/* Footer Formatting
==============================================================*/
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px 'Open Sans';
padding: 55px 50px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font-family: 'Oswald', sans-serif;
font: normal 36px 'Open Sans', sans-serif;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
/* Responsive Footer */
@media (max-width: 880px) {
.footer-distributed{
font: bold 14px 'Open Sans';
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
footer-icons i.fa-twitter:hover {
color: #55acee;
}
footer-icons i.fa-linkedin:hover {
color: #0077b5;
}
footer-icons i.fa-facebook:hover {
color: #3b5998;
}非常感谢任何帮助
提前致谢 汤姆
最佳答案
我认为已修复:
/* Section Formatting
======================================================== */
.section-one {
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
#section-one h2, h3, h4, p {
color: #fff;
}
.vline:nth-of-type(1){
border-right: 2px solid #474747;
}
.img-center {
margin: 0 auto;
}
.section-two {
padding-top: 50px;
text-align: center;
background: #6d6d6d;
}
.section-three {
height: 100%;
padding-top: 250px;
text-align: center;
background: #ebebeb;
}
.section-four {
height: 100%;
padding-top: 250px;
text-align: center;
background: #6d6d6d;
}
小心给你的 .section 类 height 大于 100%
关于html - Bootstrap 3 - 重叠内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32383769/