我一个月以来一直在我的笔记本电脑上建立一个网站，网站在我的机器上看起来很漂亮和花花公子（15英寸的屏幕。但是当我在不同的机器（17英寸和13英寸）上运行它时，这一切都是随便一点。我使用过bootstrap，我的网站在某种程度上反应灵敏但不完全。
由于我不完全知道网站的哪些部分并负责“无响应”，我将在此处发布整个代码。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css"></link>
<link rel="stylesheet" href="css/navbar.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Big Data for your city!</title>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Explore around">
<img style="max-width:150px; margin-top: -7px;"
src="Images/logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">SIGN UP</a></li>
<li><a href="#">LOG IN</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<h1><center>Find amazing places near your city.</center></h1>
<p>Places you could travel to and explore in a weekend.</p>
<a class = "explore-anc" href="#Cities"><button id "exlpore-button" class="btn sm explore">Explore</button></a>
<p>OR</p>
<div class = "seach-area">
<form id="searchBox" action="/search" style="display:inline;" method="get">
<center><input id="text-enter" name="q" size="80" type="text" placeholder="Enter a place "/>
<input id="search-button" value="Search" type="submit"/></center>
</form>
</div>
</div>
</div>
<div class="learn-more" id ="learn">
<div class="container">
<div class = "row">
<div class = "col-md-4">
<h3><a href="#Cities">Cities with service</a></h3>
<p>Find all the cities here!</p>
</div>
<div class = "col-md-4">
<h3><a href="#analytics">Analyze</a></h3>
<p>Big data analyics</p>
</div>
<div class = "col-md-4">
<h3><a href = "value.html">Vlue</a></h3>
<p>Add value to all your stuff here!</p>
</div>
</div>
</div>
</div>
<div id = "Cities" class = "neighborhood-guides">
<div class = "container">
<h2>Cities:</h2>
<p>Start exploring places around your city</p>
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city NY">
<image src = "Images/NY.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city mum">
<image src = "Images/Mum.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city SF">
<image src = "Images/SF.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city LA">
<image src = "Images/LA.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city del">
<image src = "Images/Del.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city MA">
<image src = "Images/MA.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div id = "analytics" class = "analytics">
<div class = "container">
<div>
<h2><center>Plan better with data</center></h2>
<p>Data is constantly churned, filtered and updated. Forget numbers, use graphs and make your every trip a perfect one</p>
</div>
<div class="row">
<div class="col-md-6">
<img src="Images/india-home.png" />
</div>
<div class="col-md-6">
<ul type = "">
<li>Weather patterns, rainfall graphs on every city.</li>
<li>Popularity pattern, interest rate graphs on each and every place</li>
<li>The size of the circle in this map represents the number of places covered in that city</li>
<li>Go to your city and find analytics there. Also, each place get its own graphs</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS： Navbar：
html, body{height: 100%;min-height:100%;}
header .navbar {
padding-left: 0px;
padding-right: 0px;
padding-top:30px;
transition: all .5s ease-out;
}
header .navbar-brand {
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-default {
background-color: transparent;
border:none !important;
}
header .navbar-default .navbar-nav li {
color: white;
font-size: 22px;
padding: 5px 8px;
font-weight: 700;
}
header .navbar-default .navbar-nav a {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
header .navbar-default .navbar-nav a:active {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
/** Navbar Brand **/
header .navbar-brand {
margin-left:0px;
padding: 0px;
}
/*Navbar toggle*/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
@media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
/*Links Navbar*/
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
header .navbar-default .navbar-nav a:focus{
color: white;
}
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
主要CSS：
.jumbotron {
position: relative;
background-image:url('Images/B.jpg');
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin-bottom:0px;
}
.jumbotron .container-fluid {
position: relative;
top:105px;
}
.jumbotron h1 {
color: #fff;
font-size: 60px;
font-family: Arial;
font-weight: 700;
opacity:1;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align:center;
font-weight: 700;
opacity:1;
padding-top:10px;
}
.jumbotron a {
text-decoration: none;
width:15%;
}
.search-area{
display:block;
padding-top: 100px;
margin-top: 100px;
}
#search-button {
background:transparent;
color:white;
font: 'trebuchet ms', trebuchet;
padding:13px 25px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
-o-border-radius:0 10px 10px 0;
border:2px solid white;
font-weight:bold;
margin-left:-4px;
}
#search-button:hover{
background-color: #5CDEBD;
border: 2px solid #5CDEBD;
}
#text-enter {
background: white;
padding:15px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:30%;
}
/*Learn*/
.learn-more {
padding: 30px;
background-color: #8715CE;
color: white;
font-weight: 500;
font-size: 17px;
}
.learn-more h3 {
padding-top:30px;
padding-bottom:30px;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 800;
}
.learn-more a {
color: white;
padding:10px;
border: 2px solid white;
}
.learn-more a:hover {
background-color:white;
color: rgba(0,0,0, 0.5);
text-decoration:none;
}
/*neighborhood*/
.neighborhood-guides{
background-color: #efefef;
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
box-shadow: none;
}
.neighborhood-guides .row .thumbnail{
box-shadow: none;
background-color:black;
}
.neighborhood-guides .row .thumbnail img:hover {
background-color: #000;
opacity: 0.6;
}
.neighborhood-guides .container{
padding-top:25px;
}
.neighborhood-guides .container .row{
padding-top:30px;
}
.neighborhood-guides h2{
padding-top:50px;
font-weight:800;
color: #393c3d;
font-size: 48px;
}
.neighborhood-guides p{
margin-bottom:13px;
font-size: 20px;
}
.analytics
{
background-color: #15CE68;
min-height: 130%;
color:white;
}
.analytics ul li{
list-style: none;
padding-top: 60px;
font-size: 20px;
font-weight: 700;
}
.analytics h2{
font-weight: 900;
padding-top:6%;
font-size: 48px;
}
.analytics .container p{
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 20px;
}
.analytics img{
max-height: 600px;
}
如果有人可以帮助我，我会非常感激，这已经给我带来了一个星期的负担。
答案 0 :(得分：0)
您可能会发现一些有用的东西