我正在使用bootstrap构建一个工作网站，但是当分辨率发生变化时我无法缩小它
http://www.vccb.co.za/demohome/
我使用的是Bootstrap v3.3.4。 我也有视口元标记。
<!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>
答案 0 :(得分：1)
要使用引导程序进行响应式设计，您需要指定不同大小的列数。 Bootstrap分为4个断点：
它是一个移动的第一个框架，因此首先指定超小的大小，然后指定大小应该更改的点。例如。如果你希望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。
这是默认引导程序导航栏的编解码器，因此您可以看到它应该如何：http://codepen.io/Xhaerithius/pen/ZQPqNz
此外，您也可以使用引导导航栏作为页脚。只需将navbar-static-top的班级更改为navbar-fixed-bottom即可。你的页脚也需要响应！ ：d