为页脚引导程序着色以使其响应
Posted
技术标签:
【中文标题】为页脚引导程序着色以使其响应【英文标题】：Colour the footer bootstrap to make it responsive 【发布时间】：2018-10-25 17:08:41 【问题描述】：如您所见，在大、中、小屏幕上，页脚具有正确的背景默认颜色（由于 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>【问题讨论】：
【参考方案1】：在您的 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">
【讨论】：
以上是关于为页脚引导程序着色以使其响应的主要内容，如果未能解决你的问题，请参考以下文章
Angular 中的响应式页脚，带有始终位于页面底部的引导程序。不粘