1
我的基於Bootstrap的着陸頁存在問題。在筆記本電腦上一切看起來都很好，但是當我儘量使用<div class="col-lg-12">時，儘量減少窗口部分的重疊。我希望當我將它調整爲小（移動）大小時，它應該將第一部分設置爲低於其他部分，但是頂部部分的內容覆蓋底部部分。Bootstrap重疊部分
下面的代碼（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 ="[email protected]">
</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 ="[email protected]">
</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
您可以在此找到答案的模板作者的網站：http://startbootstrap.com/template-overviews/scrolling-nav/ – ZimSystem
我沒有看到任何問題 –
基本上模板WASN不會被設計爲移動響應。話雖如此，但我懷疑這是我們能夠解決的問題，因爲整個問題太廣泛了。 –