Bootstrap 3 - 重叠内容

时间：2015-09-03 19:17:44

标签： html css twitter-bootstrap

我正在使用Bootstrap来创建一个单页网站，但是当我将页面重新调整为移动大小时，内容开始重叠，而我在使用bootstrap时从未体验到这一点，这就是正在发生的事情：

enter image description here

这是我的主要html文件：

＆＃13;
＆＃13; 
<!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 &copy; 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>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
/*!
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;
}
＆＃13;
＆＃13;
＆＃13;

非常感谢任何帮助

提前致谢 汤姆

1 个答案:

答案 0 :(得分：1)

修正我认为：

/*  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％

相关问题
最新问题