我正在为工作在 bootstrap 中构建一个网站，但当分辨率完全改变时我无法缩小它
http://www.vccb.co.za/demohome/
我正在使用 Bootstrap v3.3.4。 我也有视口(viewport)元标记。
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="Vericred, Credit bureau, tracing, search, people" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VCCB Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/agency.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- JQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-63126052-1', 'auto');
ga('send', 'pageview');
</script>
<body id="page-top" style="width:100%;position:relative;" class="index">
<!-- Navigation -->
<div id="menuContainer" class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid" style="position:relative;width:100%">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<div class="navbar-header page-scroll" style="position:absolute;margin-left:18%">
<h2 class="section-heading slant">We are not just another bureau,</h2>
<h3 class="slant">because you are not just another consumer</h3>
<img id="menuLogo" src="img/full_size_logo.png" style="margin-top:-18%;margin-left:140%;height:100px;width:280px;visibility:visible"/>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:8%">
<ul class="nav navbar-nav navbar-right multi-level" role="menu" style="margin-top:-5.2%;margin-left:14%;width:100%;position:relative">
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-top:4%;">
<a class="page-scroll" href="Home.html">Home</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;">
<a id="vis" class="page-scroll" href="about.html">About</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a href="ConsumerFriend.html">Consumer Friend</a>
</li>
<li class="dropdown" style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Business Partner<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" >
<a class="dropdown-toggle" data-toggle="dropdown">Our Services and Products</a>
<ul class="dropdown-menu">
<li><a target="_blank" href="consumer.html">Consumer Contact Data</a></li>
<li><a target="_blank" href="ConsumerBehaviouralData.html">Consumer Behavioural Data</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown" style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Legal<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="docs/PAIA_MANUAL.pdf">PAIA Manual</a></li>
<li><a target="_blank" href="docs/DisclaimerAndPrivacyPolicy.docx">Disclaimer and Privacy Policy</a></li>
<li><a href="Affiliations.html">Affiliations</a></li>
</ul>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;margin-left:5px;margin-top:4%;">
<a href="ContactUs.html">Contact Us</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;">
<a target="_blank" href="https://www.vccb.co.za/Trace">Client Login</a>
</li>
<li style="border: 3px outset #202020;border-radius:0.5em;overflow:hidden;margin-left:5px;margin-top:4%;background-color:red;">
<a target="_blank" href="/RequestAccount.html">Sign Up As A Client</a>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:3.8%;">
<a href="#" style="line-height:0px;padding-top:8px;margin-left:-17px;"><i class="fa fa-twitter" style="margin-top:25%"></i></a>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:2%;margin-top:3.8%;">
<a href="#" style="line-height:0px;padding-top:8px;margin-left:-17px;""><i class="fa fa-facebook" style="margin-top:25%"></i></a>
</li>
<li class="list-inline social-buttons" style="margin-left:2%;margin-top:2%;margin-top:3.8%;">
<a href="#" style="line-height:0px;padding-top:8px;margin-left:-17px;"><i class="fa fa-linkedin" style="margin-top:25%"></i></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</div>
<section id="CompInfo" style="font:14px/18px Times New Roman;color:#64676b;background-color:black;height:700px;width:70%;margin-left:15%;margin-top:1%;position:relative;">
<label style="color:white;font-size:10em;margin-top:20%;margin-left:20%;position:relative;">TUTORIALS</label>
</section>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted">The main benefits to the consumer whose information is kept on our data base are:</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Contactability</h4>
<p class="text-muted">Improve your contactability.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-money fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Pension Pay-outs</h4>
<p class="text-muted">Receive outstanding pension pay-outs.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-suitcase fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Avoid Legal Action</h4>
<p class="text-muted">Chance to pay outstanding debt and avoid legal action.</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-medkit fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Consumer Rehabilitation</h4>
<p class="text-muted">Rehabilitating consumers.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-refresh fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Stay Updated</h4>
<p class="text-muted">Receive important information timeously.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-child fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Add Value</h4>
<p class="text-muted">This adds value to the consumers overall wellbeing.</p>
</div>
</div>
<br>
<br>
<button id="request" class="btn btn-m" style="color:white;float:right;margin-right:6%" type="button">Sign Up As A Client</button>
<br>
<br>
<br>
<label style="color:black;float:right"> Already a tracing customer? Click <a style="color:black;text-decoration:underline;" target="_blank" href="https://www.vccb.co.za/Trace">HERE</a> to login.</label>
</div>
</section>
<div style="visibility:hidden">Vericred, Credit bureau, tracing, search, people</div>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
<h3 class="section-subheading text-muted">VeriCred Credit Bureau (Pty) Ltd is the newest registered Credit Bureau in South Africa in terms of the National Credit Act No 34 of 2005, with registration number NCRCB21.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li class="in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1990-1994</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p class="text-muted">VeriCred Credit Bureau was first established in 1990 in Bophuthatswana as a credit bureau. </p>
</div>
</div>
</li>
<li class="timeline-inverted in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1994-2007</h4>
<h4 class="subheading">South Africa and the National Credit Act</h4>
</div>
<div class="timeline-body">
<p class="text-muted">After 1994 VeriCred Credit Bureau was incorporated into the New South Africa and continued to operate until the National Credit Act was implemented in 2007 which significantly changed the face of the industry. </p>
</div>
</div>
</li>
<li class="in">
<div class="timeline-image">
<img class="img-circle img-responsive" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2012</h4>
<h4 class="subheading">Vericred Credit Bureau</h4>
</div>
<div class="timeline-body">
<p class="text-muted">In 2012 VeriCred Credit Bureau was revived and a new credit bureau was established. </p>
</div>
</div>
</li>
<li class="timeline-inverted in">
<a href="#services">
<div class="timeline-image">
<h4 style="color:White">Be Part
<br>Of Our
<br>Story!</h4>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact Us</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h4 style="color:white"><label style="color:red">Phone:</label> <a style="color:white" href="tel:0878034798">087 803 4798</a> </h4>
<h4 style="color:white"><label style="color:red">Fax Number:</label> 086 604 1273</h4>
<h4 style="color:white"><label style="color:red">Email:</label> <a style="color:white" href="mailto:tracesupport@vccb.co.za">info@vccb.co.za</a></h4>
<h4 style="color:white"><label style="color:red">Website:</label> <a style="color:white" href="www.vccb.co.za">www.vccb.co.za</a> </h4>
<h4 style="color:white"><label style="color:red">General Enquiries:</label> <a style="color:white" href="mailto:info@vccb.co.za">info@vccb.co.za</a> </h4>
<h4 style="color:white"><label style="color:red">Website:</label> <a style="color:white" href="mailto:disputes@vccb.co.za">disputes@vccb.co.za</a> </h4>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="button" onclick="SendMail()" class="btn btn-xl" style="color:white">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container" style="width:auto">
<div class="row">
<div class="col-md-4" style="width:4%">
<img id="back-top" onclick="$('body,html').animate({scrollTop: 0}, 800);" src="/img/top.png" title="Click to go to the top." style="width:100%;height:100%;border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%; box-shadow:0 0 10px rgba(0,0,0,1);-webkit-box-shadow: 0 0 10px rgba(0,0,0,1);-moz-box-shadow: 0 0 10px rgba(0,0,0,1)"/>
</div>
<div class="col-md-4" style="width:25%">
<ul class="list-inline quicklinks">
<li><a class="page-scroll" href="#contact">Contact us</a>
<a target="_blank" href="docs/Terms Conditions and Privacy Policy.pdf">Disclaimer and Privacy Policy</a></li>
<li><a href="docs/PAIA_MANUAL.pdf" target="_blank">PAIA Manual</a></li>
</ul>
</div>
<div class="col-md-4" style="width:20%;margin-left:12%;">
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
<div class="col-md-4" style="width:25%;margin-left:14%">
<span class="copyright">Copyright © www.vccb.co.za 2016</span>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="Scripts/ContactUs.js"></script>
<script>
var once = true;
var count = 0;
$('#back-top').fadeOut();
function isScrolledIntoView(elem) {
var centerY = Math.max(0, ((jQuery(window).height() - jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
centerY = parseFloat(centerY) + 300;
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function () {
jQuery(".in").each(function (index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).animate({ opacity: 1.0 }, 300);
}
});
});
$(document).on("click", "#vis", function () {
$(".in").css("opacity", "1.0");
});
$(document).on("click", "#giveMail", function () {
alert("Please fill the form in and email it to tracesupport@vccb.co.za");
});
$(document).on("click", "#request", function () {
window.location.href = "/RequestAccount.html";
});
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
</script>
最佳答案
要使用 bootstrap 进行响应式设计，您需要指定不同尺寸的列数。 Bootstrap 分为 4 个断点:
- col-xs-*(特小号)
- col-sm-*(小)
- col-md-*(中)
- col-lg-*(大)
这是一个移动优先的框架，所以首先指定超小尺寸，然后指定尺寸应该改变的点。例如。如果你想让一个 div 在特小号、小号和中号上有 12 列，但在大号上只有 6 列，你会做 <div class="col-xs-12 col-lg-6"> .
您可以指定所有断点，但如果您不指定，它将默认为指定的最小断点。
在您的代码中，您只设置了一个断点的大小，并且您没有采用移动优先，因此它没有响应。
导航栏没有折叠的原因是你没有把按钮放在div.navbar-header里面.需要有一个带有 data-toggle="collapse" 的按钮和 data-target="#idOfNav" .这是在较小的屏幕上显示的内容，也是将导航栏切换为折叠/展开的内容。例如:
<button class="navbar-toggle" data-toggle="collapse" data-target="#nav" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
这将进入 navbar-header .
这是默认 Bootstrap 导航栏的代码笔，因此您可以看到它应该是怎样的:http://codepen.io/Xhaerithius/pen/ZQPqNz
此外，您还可以为页脚使用 Bootstrap 导航栏。只需更改 navbar-static-top 的类别即可至 navbar-fixed-bottom .您的页脚也需要响应! :D
关于javascript - 网站根本没有缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35426697/