頁面的 HTML 鏈接在響應模式下無法正常工作
[英]HTML links with page not working as expect in responsive mode
問題描述
我正在幫助某人建立一個網站，我絕不是專家。 這是我修改過的免費引導模板。 一切都在桌面模式下完美運行。 但是當我測試（使用 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;
}
希望這一切都有意義，有人可以理解它！
提前致謝！
2 個解決方案
解決方案1
1 已采納 2019-12-07 23:10:41
為什么我們會觀察到這種行為？
前 3 個部分（服務、維修和護理包）在部分和 div 內部，它們用於在頂部獲得一些邊距，以便我們可以在屏幕上看到 h2（這是 ID 的子項）。 但是，推薦和聯系我們部分不在任何部分和 div中； 因此，不同的行為。
要查看確切的效果，我們更改一個類以查看間距現在未設置...
@media (max-width: 991px)
#servicing, #repairs, #care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
這意味着跨度（#servicing、#repairs、#care）本身是不夠的——我們看到標題的正確位置，因為圖像覆蓋了跨度沒有做的很多部分；
如何解決？
- 我們必須為鏈接添加一個跨度並提供填充，就像您為#servicing、#repairs、#care 所做的那樣
- 由於（聯系人和推薦）的場景不同並且沒有圖像占用空間，我們必須添加一些 CSS - 聯系人和推薦的結果不同，因為這些部分中元素的層次結構也不同.
@media（最大寬度：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>
解決方案2
0 2022-07-16 10:07:39
抱歉，仍然不適合我，所以我將腳本添加到鏈接：
<ul>
<li><a href="index.php" onclick="load('index');">Home</a></li>
<li><a href="blog.php" onclick="load('blog');">Blog</a></li>
</ul>
<script>
function load(x)
{
window.location.href= x+'.php';
}
</script>
將徽標與導航鏈接對齊，並將徽標置於響應模式下的鏈接上方
[英]Align logo with navigation links and place the logo above links in responsive mode
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.