Bootstrap 个重叠部分
Bootstrap overlapping sections
我的目标网页有问题 Bootstrap。在笔记本电脑上一切看起来都很好，但是当我最小化 window 部分时开始相互重叠，尽管我使用了 <div class="col-lg-12">。我希望当我将其调整为小（移动）大小时，它应该将第一个部分设置在其他部分下方，但是顶部部分的内容覆盖了底部部分。
这是代码 (GitHub Gist link):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Brand Landing Page</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<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">Home</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">
<!-- 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>
<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 class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">Twitter</a></li>
<li><a href = "#">Facebook</a></li>
<li><a href = "#">Google+</a></li>
<li><a href = "#">Instagram</a></li>
</ul>
</li>
<li><a href = "#contact-form" data-toggle="modal" >Contact us!</a></li>
</ul>
.
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Carousel -->
<div id="myCarousel" class = "carousel slide">
<ol class = "carousel-indicators">
<li data-target="#myCarousel" data-slide-to= "0" class = "active"></li>
<li data-target="#myCarousel" data-slide-to= "1"></li>
<li data-target="#myCarousel" data-slide-to= "2"></li>
</ol>
<div class="carousel-inner">
<div class = "item active">
<img src= "img/carousel1.png" alt="first file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 1 </h1>
<p class="text-justify "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
<div class = "item">
<img src= "img/carousel2.png" alt="second file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 2 </h1>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
<div class = "item">
<img src= "img/carousel3.png" alt="third file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 3</h1>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
</div>
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">
<span class = "icon-prev"></span>
</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">
<span class = "icon-next"></span>
</a>
</div><br><br><br>
<p> <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a></p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>About Section</h1>
<hr class="section-heading-spacer">
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Wher we are:</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet.</p>
</div>
<div class="col-lg-3 col-lg-offset-3 col-sm-3">
<img class="img-responsive " src="img/ipad.png" alt="" >
</div>
</div>
<hr class="section-heading-spacer">
<hr class="section-heading-spacer">
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">What we do:</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet!</p>
</div>
<div class="col-lg-3 col-sm-pull-4 col-sm-4">
<img class="img-responsive" src="img/dog.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<hr class="section-heading-spacer">
<a class="btn btn-default page-scroll" href="#services">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>Services</h1>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service1.jpg" alt="">
</a>
<h3>
<a href="#">Service 1</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service2.jpg" alt="">
</a>
<h3>
<a href="#">Service 2</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service3.jpg" alt="">
</a>
<h3>
<a href="#">Service 3</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<ol style="visibility:hidden;">
<li> </li>
</ol>
<a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
<form class="form-horizontal">
<div class = "modal-header">
<h4>Leave us message. We will respond in 24h.</h4>
</div>
<div class = "modal-body">
<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-8">
<input type ="text" class = "form-control" id ="contact-name" placeholder ="Full Name">
</div>
</div>
<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-8">
<input type ="email" class = "form-control" id ="contact-email" placeholder ="you@example.com">
</div>
</div>
<div class="form-group">
<label for = "contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-8">
<textarea class = "form-control" rows ="8" ></textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<div class="col-lg-7">
<a class = "btn btn-primary" type = "submit">Submit</a>
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>We are social:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/BrandFlowNet" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="#" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://www.linkedin.com/company/9390236" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
</section>
<div class = "navbar navbar-default navbar-fixed-bottom" id="footer">
<div class = "container">
<p class = "navbar-text pull-left">Site Built by BrandFlow.net</p>
<a class = "navbar-btn btn-danger btn page-scroll pull-right" href="#page-top">To the sky!</a>
</div>
</div>
<div class = "modal fade" id = "contact-form" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<form class="form-horizontal">
<div class = "modal-header">
<h4>Contact Tech Site</h4>
</div>
<div class = "modal-body">
<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type ="text" class = "form-control" id ="contact-name" placeholder ="Full Name">
</div>
</div>
<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type ="email" class = "form-control" id ="contact-email" placeholder ="you@example.com">
</div>
</div>
<div class="form-group">
<label for = "contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class = "form-control" rows ="8" ></textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<a class = "btn btn-primary" type = "submit">Submit</a>
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</form>
</div>
</div>
</div>
<!-- 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>
实时预览：
http://brandflow.net/products/bootstrap/flowlandingpage/index.html
您添加了 height:100% 某些导致分辨率较低的问题的元素。
.服务部分{
身高：100%；
填充顶部：50px；
文本对齐：居中；
背景：#fff；
}
和
.接触部分{
身高：100%；
填充顶部：50px；
文本对齐：居中；
背景：#eee；
}
我使用了 Skelly 推荐并在评论中找到了答案。
我将 height: 100% 替换为 min-height: 100% ，效果非常好！
.about-section {
min-height: 100%;
padding-top: 50px;
text-align: center;
background: #eee;
}
我的目标网页有问题 Bootstrap。在笔记本电脑上一切看起来都很好，但是当我最小化 window 部分时开始相互重叠，尽管我使用了 <div class="col-lg-12">。我希望当我将其调整为小（移动）大小时，它应该将第一个部分设置在其他部分下方，但是顶部部分的内容覆盖了底部部分。
这是代码 (GitHub Gist link):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Brand Landing Page</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<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">Home</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">
<!-- 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>
<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 class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">Twitter</a></li>
<li><a href = "#">Facebook</a></li>
<li><a href = "#">Google+</a></li>
<li><a href = "#">Instagram</a></li>
</ul>
</li>
<li><a href = "#contact-form" data-toggle="modal" >Contact us!</a></li>
</ul>
.
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Carousel -->
<div id="myCarousel" class = "carousel slide">
<ol class = "carousel-indicators">
<li data-target="#myCarousel" data-slide-to= "0" class = "active"></li>
<li data-target="#myCarousel" data-slide-to= "1"></li>
<li data-target="#myCarousel" data-slide-to= "2"></li>
</ol>
<div class="carousel-inner">
<div class = "item active">
<img src= "img/carousel1.png" alt="first file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 1 </h1>
<p class="text-justify "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
<div class = "item">
<img src= "img/carousel2.png" alt="second file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 2 </h1>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
<div class = "item">
<img src= "img/carousel3.png" alt="third file" class ="img-responsive">
<div class ="carousel-caption">
<h1> Image 3</h1>
<p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non. Vivamus pellentesque semper ante, ut convallis nunc dapibus ut. Proin et molestie lectus, at lacinia ligula. Phasellus interdum scelerisque orci non commodo.</p>
</div>
</div>
</div>
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">
<span class = "icon-prev"></span>
</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">
<span class = "icon-next"></span>
</a>
</div><br><br><br>
<p> <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a></p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>About Section</h1>
<hr class="section-heading-spacer">
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Wher we are:</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet.</p>
</div>
<div class="col-lg-3 col-lg-offset-3 col-sm-3">
<img class="img-responsive " src="img/ipad.png" alt="" >
</div>
</div>
<hr class="section-heading-spacer">
<hr class="section-heading-spacer">
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">What we do:</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet!</p>
</div>
<div class="col-lg-3 col-sm-pull-4 col-sm-4">
<img class="img-responsive" src="img/dog.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<hr class="section-heading-spacer">
<a class="btn btn-default page-scroll" href="#services">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>Services</h1>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service1.jpg" alt="">
</a>
<h3>
<a href="#">Service 1</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service2.jpg" alt="">
</a>
<h3>
<a href="#">Service 2</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/service3.jpg" alt="">
</a>
<h3>
<a href="#">Service 3</a>
</h3>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem augue, sollicitudin sed ultricies ac, elementum a mi. Vivamus pellentesque justo eget nibh dapibus laoreet. In hac habitasse platea dictumst. Nullam ullamcorper consequat nisl, vitae suscipit nibh ultricies semper. Sed facilisis mollis mauris, at gravida lacus lobortis non.</p>
<a class = "navbar-btn btn-primary btn page-scroll pull-center" href="#">Read more!</a>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<ol style="visibility:hidden;">
<li> </li>
</ol>
<a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
<form class="form-horizontal">
<div class = "modal-header">
<h4>Leave us message. We will respond in 24h.</h4>
</div>
<div class = "modal-body">
<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-8">
<input type ="text" class = "form-control" id ="contact-name" placeholder ="Full Name">
</div>
</div>
<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-8">
<input type ="email" class = "form-control" id ="contact-email" placeholder ="you@example.com">
</div>
</div>
<div class="form-group">
<label for = "contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-8">
<textarea class = "form-control" rows ="8" ></textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<div class="col-lg-7">
<a class = "btn btn-primary" type = "submit">Submit</a>
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>We are social:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/BrandFlowNet" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="#" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://www.linkedin.com/company/9390236" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
</section>
<div class = "navbar navbar-default navbar-fixed-bottom" id="footer">
<div class = "container">
<p class = "navbar-text pull-left">Site Built by BrandFlow.net</p>
<a class = "navbar-btn btn-danger btn page-scroll pull-right" href="#page-top">To the sky!</a>
</div>
</div>
<div class = "modal fade" id = "contact-form" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<form class="form-horizontal">
<div class = "modal-header">
<h4>Contact Tech Site</h4>
</div>
<div class = "modal-body">
<div class="form-group">
<label for = "contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type ="text" class = "form-control" id ="contact-name" placeholder ="Full Name">
</div>
</div>
<div class="form-group">
<label for = "contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type ="email" class = "form-control" id ="contact-email" placeholder ="you@example.com">
</div>
</div>
<div class="form-group">
<label for = "contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class = "form-control" rows ="8" ></textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<a class = "btn btn-primary" type = "submit">Submit</a>
<a class = "btn btn-danger" data-dismiss = "modal">Close</a>
</div>
</form>
</div>
</div>
</div>
<!-- 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>
实时预览： http://brandflow.net/products/bootstrap/flowlandingpage/index.html
您添加了 height:100% 某些导致分辨率较低的问题的元素。
.服务部分{
身高：100%；
填充顶部：50px；
文本对齐：居中；
背景：#fff；
}
和
.接触部分{
身高：100%；
填充顶部：50px；
文本对齐：居中；
背景：#eee；
}
我使用了 Skelly 推荐并在评论中找到了答案。
我将 height: 100% 替换为 min-height: 100% ，效果非常好！
.about-section {
min-height: 100%;
padding-top: 50px;
text-align: center;
background: #eee;
}