HTML 页面链接在响应模式下无法正常工作
HTML links with page not working as expect in responsive mode
我正在帮助某人建立网站，我绝不是专家。这是我修改过的免费 bootstrap 模板。一切都在桌面模式下完美运行。但是当我测试（使用 chrome）响应模式时，页面内链接无法按预期工作。
为了留出粘性导航栏，我在锚点上添加了边距。我不得不使用媒体查询来解决这个问题，但它不适用于我的所有链接。服务、维修和保养包运行良好，是客户评价和联系我们造成了问题。我已将其缩小到该部分，但无法弄清楚发生了什么。
HTML:
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="The leader in mobility scooter servicing and repairs in Norfolk and Suffolk. Committed to providing first class customer care, in your own home by friendly staff"/>
<meta name="author" content="CozyApps"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta property="og:image" content="http://whitey012001.000webhostapp.com/img/og-img.jpg" />
<!-- <meta property="og:image:secure_url" content="https://whitey012001.000webhostapp.com/img/og-img.jpg" /> -->
<meta property="og:title" content="First for mobility scooter servicing & repairs across Norfolk & Suffolk" />
<meta property="og:description" content="Welcome to Mobility Services Direct, the leader in mobility scooter servicing and repairs across Norfolk and Suffolk. We proudly trade on our reputation and are committed to providing a first class service built around dedicated customer care." />
<meta property="og:image:height" content="300" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://whitey012001.000webhostapp.com" />
<title>Mobility Scooter Servicing & Repair across Norfolk and Suffolk</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png" />
<!-- Custom styles for this template -->
<link href="css/landing-page-v2.css" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "http://whitey012001.000webhostapp.com",
"name": "Mobility Services Direct Ltd.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+44-1502-450024",
"contactType": "Customer service"
}
}
</script>
</head>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use <a href="#contact">other traditional methods</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class=" features-icons bg-light text-center">
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="contact" class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
<a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>
</li>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function(){
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(img/bg-showcase-Servicing-v2.jpg)");
$("#showcase-repairs").css("background-image", "url(img/bg-showcase-Repairs-v2.jpg)");
$("#showcase-care-package").css("background-image", "url(img/bg-showcase-Care-Package-v2.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
</script>
</body>
</html>
CSS:
/*!
* Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/
body{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700
}
header.masthead{
position:relative;background-color:#343a40;
background:url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size:cover;
padding-top:8rem;
padding-bottom:8rem;
}
header.masthead .overlay{
position:absolute;background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
header.masthead h1{
font-size:2rem
}
@media (max-width:1200px){
header.masthead{
background:url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size:cover;
}
}
@media (max-width: 991px){
#servicing, #repairs, #care{
margin-top: 200px;
}
}
@media (max-width:490px){
.call-to-action a, .call-to-action i, .call-to-action p{
font-size: 1.2rem !important;
}
}
@media (max-width:390px){
.call-to-action a, .call-to-action i, .call-to-action p
.header a, .header i, .header p{
font-size: 1rem !important;
}
.call-to-action .MSDvan{
max-height: 200px;
}
.logo{
max-height: 130px;
}
}
@media (min-width:768px){
header.masthead{
padding-top:12rem;padding-bottom:12rem
}
header.masthead h1{
font-size:3rem
}
}
.showcase .showcase-text{
padding:3rem
}
.showcase .showcase-img{
min-height:30rem;
background-size:cover;
background-position: center center;
}
@media (min-width:768px){
.showcase .showcase-text{
padding:7rem
}
}
i{
color: #0E3A91;
}
.features-icons{
padding-top:7rem;
padding-bottom:7rem
}
.features-icons .features-icons-item{
max-width:20rem
}
.features-icons .features-icons-item .features-icons-icon{
height:7rem
}
.features-icons .features-icons-item .features-icons-icon i{
font-size:4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i{
font-size:5rem
}
.call-to-action{
position:relative;background-color:#343a40;
background:url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size:cover;
padding-top:7rem;
padding-bottom:7rem
}
.call-to-action .overlay{
position:absolute;
background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
.call-to-action a, .call-to-action i, .call-to-action p{
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer{
padding-top:4rem;
padding-bottom:4rem
}
/* Header */
.logo{
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a{
color: #7EA2D3;
text-decoration: none;
}
.header a:hover{
color: red;
}
.header p{
font-size: 1.3em
}
.no-bottom-margin{
margin-bottom: 0;
}
/* Navbar */
.navbar-container{
padding: 0px !important;
}
nav{
background-color: white !important;
}
nav a{
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover{
color: #0E3A91 !important;
}
nav .active, .active a{
color: #0E3A91 !important;
}
.nav-link{
margin-left: 20px;
margin-right: 20px;
}
.link{
margin-top: -50px;
}
.contact-form{
margin: 0 auto;
margin-top:2rem;
max-width: 800px;
}
.btn-primary{
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab{
color: white;
}
.fb-link:hover{
cursor: pointer;
}
.bg-white{
background-color: white;
}
.form-feedback{
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
希望这一切都有意义，并且有人能理解它！
提前致谢！
为什么我们会观察到这种行为？
前 3 个部分（服务、维修和保养包）是 内部部分和 divs，它们用于赚取一些利润在顶部，以便我们可以在屏幕上看到 h2（这是 ID 的 child）。但是，推荐和联系我们部分 不在任何部分和 divs 内；因此，不同的行为。
为了看具体效果，我们改一个class看看间距现在没有设置了...
@media (max-width: 991px)
#servicing, #repairs, #care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
这意味着单凭跨度（#servicing、#repairs、#care）是不够的——我们看到标题的正确位置是因为图像覆盖了 span 没有做的很多部分；
如何解决？
- 我们必须为 link 添加跨度并提供填充，就像您为 #servicing、#repairs、#care 所做的那样
- 由于（联系方式和推荐）的场景不同并且没有图像可以吃掉 space，我们必须添加一些 css - 联系方式和推荐的结果不同是因为这些部分中元素的层次结构也不同。
@media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
下面的工作代码段：
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function() {
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-repairs").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-care-package").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700
}
header.masthead {
position: relative;
background-color: #343a40;
background: url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
header.masthead h1 {
font-size: 2rem
}
@media (max-width:1200px) {
header.masthead {
background: url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size: cover;
}
}
@media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
}
}
@media (max-width:490px) {
.call-to-action a,
.call-to-action i,
.call-to-action p {
font-size: 1.2rem !important;
}
}
@media (max-width:390px) {
.call-to-action a,
.call-to-action i,
.call-to-action p .header a,
.header i,
.header p {
font-size: 1rem !important;
}
.call-to-action .MSDvan {
max-height: 200px;
}
.logo {
max-height: 130px;
}
}
@media (min-width:768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem
}
header.masthead h1 {
font-size: 3rem
}
}
.showcase .showcase-text {
padding: 3rem
}
.showcase .showcase-img {
min-height: 30rem;
background-size: cover;
background-position: center center;
}
@media (min-width:768px) {
.showcase .showcase-text {
padding: 7rem
}
}
i {
color: #0E3A91;
}
.features-icons {
padding-top: 7rem;
padding-bottom: 7rem
}
.features-icons .features-icons-item {
max-width: 20rem
}
.features-icons .features-icons-item .features-icons-icon {
height: 7rem
}
.features-icons .features-icons-item .features-icons-icon i {
font-size: 4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i {
font-size: 5rem
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
.call-to-action a,
.call-to-action i,
.call-to-action p {
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer {
padding-top: 4rem;
padding-bottom: 4rem
}
/* Header */
.logo {
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a {
color: #7EA2D3;
text-decoration: none;
}
.header a:hover {
color: red;
}
.header p {
font-size: 1.3em
}
.no-bottom-margin {
margin-bottom: 0;
}
/* Navbar */
.navbar-container {
padding: 0px !important;
}
nav {
background-color: white !important;
}
nav a {
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover {
color: #0E3A91 !important;
}
nav .active,
.active a {
color: #0E3A91 !important;
}
.nav-link {
margin-left: 20px;
margin-right: 20px;
}
.link {
margin-top: -50px;
}
.contact-form {
margin: 0 auto;
margin-top: 2rem;
max-width: 800px;
}
.btn-primary {
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab {
color: white;
}
.fb-link:hover {
cursor: pointer;
}
.bg-white {
background-color: white;
}
.form-feedback {
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
/*
@media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
}
*/
@media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use <a href="#contact">other traditional methods</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<span id="testimonials" class="link"></span>
<section class=" features-icons bg-light text-center">
<span class="link"></span>
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<span id="contact"></span>
<section class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
<a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>
</li>
</div>
</div>
</div>
</footer>
我正在帮助某人建立网站，我绝不是专家。这是我修改过的免费 bootstrap 模板。一切都在桌面模式下完美运行。但是当我测试（使用 chrome）响应模式时，页面内链接无法按预期工作。
为了留出粘性导航栏，我在锚点上添加了边距。我不得不使用媒体查询来解决这个问题，但它不适用于我的所有链接。服务、维修和保养包运行良好，是客户评价和联系我们造成了问题。我已将其缩小到该部分，但无法弄清楚发生了什么。
HTML:
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="The leader in mobility scooter servicing and repairs in Norfolk and Suffolk. Committed to providing first class customer care, in your own home by friendly staff"/>
<meta name="author" content="CozyApps"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta property="og:image" content="http://whitey012001.000webhostapp.com/img/og-img.jpg" />
<!-- <meta property="og:image:secure_url" content="https://whitey012001.000webhostapp.com/img/og-img.jpg" /> -->
<meta property="og:title" content="First for mobility scooter servicing & repairs across Norfolk & Suffolk" />
<meta property="og:description" content="Welcome to Mobility Services Direct, the leader in mobility scooter servicing and repairs across Norfolk and Suffolk. We proudly trade on our reputation and are committed to providing a first class service built around dedicated customer care." />
<meta property="og:image:height" content="300" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://whitey012001.000webhostapp.com" />
<title>Mobility Scooter Servicing & Repair across Norfolk and Suffolk</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png" />
<!-- Custom styles for this template -->
<link href="css/landing-page-v2.css" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "http://whitey012001.000webhostapp.com",
"name": "Mobility Services Direct Ltd.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+44-1502-450024",
"contactType": "Customer service"
}
}
</script>
</head>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use <a href="#contact">other traditional methods</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class=" features-icons bg-light text-center">
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="contact" class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
<a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>
</li>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function(){
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(img/bg-showcase-Servicing-v2.jpg)");
$("#showcase-repairs").css("background-image", "url(img/bg-showcase-Repairs-v2.jpg)");
$("#showcase-care-package").css("background-image", "url(img/bg-showcase-Care-Package-v2.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
</script>
</body>
</html>
CSS:
/*!
* Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/
body{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700
}
header.masthead{
position:relative;background-color:#343a40;
background:url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size:cover;
padding-top:8rem;
padding-bottom:8rem;
}
header.masthead .overlay{
position:absolute;background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
header.masthead h1{
font-size:2rem
}
@media (max-width:1200px){
header.masthead{
background:url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size:cover;
}
}
@media (max-width: 991px){
#servicing, #repairs, #care{
margin-top: 200px;
}
}
@media (max-width:490px){
.call-to-action a, .call-to-action i, .call-to-action p{
font-size: 1.2rem !important;
}
}
@media (max-width:390px){
.call-to-action a, .call-to-action i, .call-to-action p
.header a, .header i, .header p{
font-size: 1rem !important;
}
.call-to-action .MSDvan{
max-height: 200px;
}
.logo{
max-height: 130px;
}
}
@media (min-width:768px){
header.masthead{
padding-top:12rem;padding-bottom:12rem
}
header.masthead h1{
font-size:3rem
}
}
.showcase .showcase-text{
padding:3rem
}
.showcase .showcase-img{
min-height:30rem;
background-size:cover;
background-position: center center;
}
@media (min-width:768px){
.showcase .showcase-text{
padding:7rem
}
}
i{
color: #0E3A91;
}
.features-icons{
padding-top:7rem;
padding-bottom:7rem
}
.features-icons .features-icons-item{
max-width:20rem
}
.features-icons .features-icons-item .features-icons-icon{
height:7rem
}
.features-icons .features-icons-item .features-icons-icon i{
font-size:4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i{
font-size:5rem
}
.call-to-action{
position:relative;background-color:#343a40;
background:url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size:cover;
padding-top:7rem;
padding-bottom:7rem
}
.call-to-action .overlay{
position:absolute;
background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
.call-to-action a, .call-to-action i, .call-to-action p{
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer{
padding-top:4rem;
padding-bottom:4rem
}
/* Header */
.logo{
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a{
color: #7EA2D3;
text-decoration: none;
}
.header a:hover{
color: red;
}
.header p{
font-size: 1.3em
}
.no-bottom-margin{
margin-bottom: 0;
}
/* Navbar */
.navbar-container{
padding: 0px !important;
}
nav{
background-color: white !important;
}
nav a{
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover{
color: #0E3A91 !important;
}
nav .active, .active a{
color: #0E3A91 !important;
}
.nav-link{
margin-left: 20px;
margin-right: 20px;
}
.link{
margin-top: -50px;
}
.contact-form{
margin: 0 auto;
margin-top:2rem;
max-width: 800px;
}
.btn-primary{
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab{
color: white;
}
.fb-link:hover{
cursor: pointer;
}
.bg-white{
background-color: white;
}
.form-feedback{
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
希望这一切都有意义，并且有人能理解它！
提前致谢！
为什么我们会观察到这种行为？
前 3 个部分（服务、维修和保养包）是 内部部分和 divs，它们用于赚取一些利润在顶部，以便我们可以在屏幕上看到 h2（这是 ID 的 child）。但是，推荐和联系我们部分 不在任何部分和 divs 内；因此，不同的行为。
为了看具体效果，我们改一个class看看间距现在没有设置了...
@media (max-width: 991px)
#servicing, #repairs, #care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
这意味着单凭跨度（#servicing、#repairs、#care）是不够的——我们看到标题的正确位置是因为图像覆盖了 span 没有做的很多部分；
如何解决？
- 我们必须为 link 添加跨度并提供填充，就像您为 #servicing、#repairs、#care 所做的那样
- 由于（联系方式和推荐）的场景不同并且没有图像可以吃掉 space，我们必须添加一些 css - 联系方式和推荐的结果不同是因为这些部分中元素的层次结构也不同。
@media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
下面的工作代码段：
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function() {
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-repairs").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-care-package").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700
}
header.masthead {
position: relative;
background-color: #343a40;
background: url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
header.masthead h1 {
font-size: 2rem
}
@media (max-width:1200px) {
header.masthead {
background: url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size: cover;
}
}
@media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
}
}
@media (max-width:490px) {
.call-to-action a,
.call-to-action i,
.call-to-action p {
font-size: 1.2rem !important;
}
}
@media (max-width:390px) {
.call-to-action a,
.call-to-action i,
.call-to-action p .header a,
.header i,
.header p {
font-size: 1rem !important;
}
.call-to-action .MSDvan {
max-height: 200px;
}
.logo {
max-height: 130px;
}
}
@media (min-width:768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem
}
header.masthead h1 {
font-size: 3rem
}
}
.showcase .showcase-text {
padding: 3rem
}
.showcase .showcase-img {
min-height: 30rem;
background-size: cover;
background-position: center center;
}
@media (min-width:768px) {
.showcase .showcase-text {
padding: 7rem
}
}
i {
color: #0E3A91;
}
.features-icons {
padding-top: 7rem;
padding-bottom: 7rem
}
.features-icons .features-icons-item {
max-width: 20rem
}
.features-icons .features-icons-item .features-icons-icon {
height: 7rem
}
.features-icons .features-icons-item .features-icons-icon i {
font-size: 4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i {
font-size: 5rem
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
.call-to-action a,
.call-to-action i,
.call-to-action p {
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer {
padding-top: 4rem;
padding-bottom: 4rem
}
/* Header */
.logo {
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a {
color: #7EA2D3;
text-decoration: none;
}
.header a:hover {
color: red;
}
.header p {
font-size: 1.3em
}
.no-bottom-margin {
margin-bottom: 0;
}
/* Navbar */
.navbar-container {
padding: 0px !important;
}
nav {
background-color: white !important;
}
nav a {
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover {
color: #0E3A91 !important;
}
nav .active,
.active a {
color: #0E3A91 !important;
}
.nav-link {
margin-left: 20px;
margin-right: 20px;
}
.link {
margin-top: -50px;
}
.contact-form {
margin: 0 auto;
margin-top: 2rem;
max-width: 800px;
}
.btn-primary {
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab {
color: white;
}
.fb-link:hover {
cursor: pointer;
}
.bg-white {
background-color: white;
}
.form-feedback {
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
/*
@media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
}
*/
@media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use <a href="#contact">other traditional methods</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<span id="testimonials" class="link"></span>
<section class=" features-icons bg-light text-center">
<span class="link"></span>
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<span id="contact"></span>
<section class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><a href="tel:01502450024"><i class="fas fa-phone-alt"></i> 01502 450024</a></p>
<p><a href="tel:07778881794"><i class="fas fa-mobile"></i> 07778 881794</a></p>
<p class="no-bottom-margin"><a href="mailto:support@mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support@mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
<a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>
</li>
</div>
</div>
</div>
</footer>