我的第一个网站没有移动响应。我已经包含了行和col-xs，col-md，col-lg但它仍然不是移动友好的。我究竟做错了什么。请帮忙。
我的网站页面：http://www.kiljakandweb.com/
我的 HTML ：
<!DOCTYPE html>
<html>
<head>
<title>KILJAK & WEB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head>
<body>
<!-- Header -->
<header id="top" class="header">
<svg width="0" height="0">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="MO, 0 0, 100% 0, 100% 100, 0% 80%"/>
</clipPath>
</defs>
</svg>
<div class="menu" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="text-vertical-center">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h1>I CODE. IT'S WHAT I DO.</h1>
</div>
</div>
</div>
<div class="arrow bounce"></div>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row aboutme">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<p>Decent portfolio is the perfect way to show off. This website features some brilliant projects from a London based full-stack Web Developer. Bears are for testing purposes only.</p>
<p class="russiantext">На самом деле, медведи тут не при чём. Это никак меня не характеризует, но история с их участием имеет место быть, поэтому пускай будут для настроения и атмосферы. </p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<style>
#googleMap {
width: 100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white * /
}
</style>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCJw0QfJXXleECtFD5031OMG75lZMiC6dY
'></script>
<script>
var myCenter = new google.maps.LatLng(51.5257, -0.0774);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h4><strong>KILJAK & WEB</strong>
</h4>
<p>Ace Hotel Shoreditch
<br>London, UK E1 6JQ</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (44) 7568599454</li>
<li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:edgar.kiljak@kiljakandweb.com">edgar.kiljak@kiljakandweb.com</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © KILJAK & WEB 2016</p>
</div>
</div>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
我的 CSS ：
@import url('https://fonts.googleapis.com/css?family=Oswald:300');
@import url('https://fonts.googleapis.com/css?family=Oswald');
html,
body {
width: 100%;
height: 100%;
background-color: lightgray;
}
.logo {
position: absolute;
top:0;
left:0;
}
.menu {
display:inline-block !important;
cursor: pointer;
margin-left: 10px;
margin-top: 40px;
}
.bar1, .bar2, .bar3 {
width: 45px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.1s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 20px;
padding: 20px;
font-size: 3.5em;
font-weight: 150;
color: white;
letter-spacing: 2px;
}
.btn {
text-transform: uppercase;
font-weight: 100;
letter-spacing: 3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 0;
}
.btn-default {
border: 1px solid #42DCA3;
color: #42DCA3;
background-color: transparent;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #42DCA3;
outline: none;
color: black;
background-color: #42DCA3;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background-image: url('../images/background.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
clip-path: url(#myClip);
-webkit-clip-path: url(#myClip);
-webkit-clip-path: polygon(
0 0, /* left top */
100% 0, /* right top */
100% 100%, /* right bottom */
0% 85% /* left bottom */
);
}
#top {
font-family: 'Oswald', sans-serif;
font-size: 50px !important;
line-height: 15px;
}
.about {
padding: 200px 0;
background-color: lightgray;
opacity: 1;
z-index: 1;
background-image: url('../images/Untitled-20.png');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.aboutme {
border: solid;
border-width: thick;
padding: 60px 20px 60px 20px;
margin: 100px;
border-color: #23527C;
font-family: 'Oswald', sans-serif;
color: black;
font-size: 29px !important;
line-height: 49px;
}
.russiantext {
padding-top: 30px;
font-size: 20px !important;
font-weight: lighter;
line-height: 29px !important;
}
.conactme {
padding: 100px;
}
footer {
background-color: #eae8e8;
padding: 100px 0;
font-family: 'Oswald', sans-serif;
font-size: 13px !important;
font-weight: lighter;
line-height: 15px;
}
答案 0 :(得分：2)
网站无法响应的一个原因是解决问题的起点，您似乎已将相同的列宽应用于所有屏幕尺寸。
对于.col-*类，不同的中缀表示列在不同屏幕尺寸上的外观：
xs-代表（或多或少）智能手机，sm-代表平板电脑，md-表示非宽屏计算机显示器，lg-代表宽屏电脑显示器。因此，当您设置类似col-xs-10 col-sm-10 col-md-10 col-lg-10的类时，您基本上会告诉Bootstrap：＆＃34;请在每个屏幕尺寸上将其设为10/12;＆＃34; - 这与响应式设计相反。
你应该为不同的中缀使用不同的值，例如col-sm-6 col-sm-4 col-lg-3，它告诉Bootstrap ＆＃34;在智能手机上使这个全宽，平板电脑的宽度减半，小PC屏幕上的1/3和宽屏幕上的1/4＆＃34; 。