如您所见，在大、中和小屏幕上，页脚具有正确的背景默认颜色(由于 panel_footer 类)，但是一旦三个部分相互堆叠，您就可以看到部分页脚是彩色的与页面的背景颜色。如何以统一颜色的方式设置页脚样式？
这里是代码:
body {
background-color: #d4f9f7;
font-family: 'Raleway', sans-serif;
}
#logoheader {
background: url('../images/logosmall.jpg') no-repeat;
width: 170px;
height: 170px;
margin-left: 30px;
}
#generalmenu {
margin-top: 110px;
font-size: 1.8em;
}
#navlist {
font-size: 1.6em;
background-color: #d4f9f7;
}
#mainpage {
background: url('../images/prague_exper.jpg') no-repeat;
background-size: cover;
height: 50vw;
box-shadow: 0 0 50px #ffff;
border: 2px solid #ffff;
}
/* Get on Board + Learning & Development Consultancy */
#intestazione {
text-align: center;
}
/* Get on Board */
#maintitle {
color: #ffffff;
font-size: 8vw;
text-shadow: 1px 1px 1px #222;
}
/* Learning & Development Consultancy */
#subtitle {
font-size: 2vw;
text-shadow: 1px 1px 1px #222;
color: #ffffff;
}
#footer {
height: 200px;
}
/*Media Queries*/
@media (max-width: 768px) {
#subtitle {
visibility: hidden;
}
#logoheader {
background: url('../images/logoxs.jpg') no-repeat;
margin-left: 120px;
}
#mainheader {
height: 120px;
}
#navlist {
font-size: 1.1em;
background-color: #d4f9f7;
}
#mainpage {
margin-top: 60px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\banco prova css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<header>
<nav id="mainheader" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logoheader" class="navbar-brand" href="#"></a>
</div>
<!-- general menu for all devices except xs ones -->
<ul id="generalmenu" class="nav navbar-nav navbar-right visible-lg visible-md visible-sm">
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Servizi</b></a></li>
<li><a href="#"><b>Contattaci</b></a></li>
<li><a href="#"><b>Referenze</b></a></li>
</ul>
<!-- Menu on the right -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="navlist" class="nav navbar-nav hidden visible-xs">
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Servizi</b></a></li>
<li><a href="#"><b>Contattaci</b></a></li>
<li><a href="#"><b>Referenze</b></a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- jumbotron AkA Prague image and main Get On Board write -->
<div id="mainpage" class="jumbotron img-responsive">
<div id="intestazione">
<h1 id="maintitle" class="display-3">Get On Board</h1>
<p id="subtitle">Learning & Development Consultancy</p>
</div>
</div>
<!--Footer-->
<footer class="panel-footer">
<div id="footer" class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span>Hours:</span><br> Sun-Thurs: 11:15am - 10:00pm<br> Fri: 11:15am - 2:30pm<br> Saturday Closed
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span>Address:</span><br> 7105 Reisterstown Road<br> Baltimore, MD 21215
<p>* Delivery area within 3-4 miles, with minimum order of $20 plus $3 charge for all deliveries.</p>
<hr class="visible-xs">
</section>
<section id="testimonials" class="col-sm-4">
<p>"The best Chinese restaurant I've been to! And that's saying a lot, since I've been to many!"</p>
<p>"Amazing food! Great service! Couldn't ask for more! I'll be back again and again!"</p>
</section>
</div>
</div>
</footer>
</body>最佳答案
在您的 CSS 中，移除页脚的高度:
#footer {
height:200px;
}
像您一样定义此高度将调整默认的 Bootstrap 在列堆叠上的行为。如果您想保留此属性，请在更大的设备上，在它们各自的媒体查询上定义它。
例如:
@media (max-width: 768px) {
#footer {
height: 200px;
}
}
这是 Working Fiddle 的链接.
PS(与问题无关):您正在导入您的 css 文件:
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\banco prova css.css">
我建议将“banco prova css.css”重命名为“banco_prova_css.css”，并从 CDN 导入 Bootstrap 的 css。 ，例如:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
关于html - 为页脚 Bootstrap 着色以使其响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50357434/