【发布时间】：2016-04-08 11:47:24
【问题描述】：
如您所见，我正在尝试在背景图像下方连续创建一个图像页脚，但我不完全确定最好的方法是什么。当我尝试将页脚定位在底部时，它最终位于<h> 元素之上。也是因为图像的宽度，我的行排在两排的原因吗？
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
.list {
font-family: 'Open Sans Condensed', sans-serif;
font-weight: bolder;
}
.synopsis {
color:white;
text-align: center;
}
.teampics .row {
margin-top: 17%;
text-align:center;
}<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="person">
<img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: absolute; top: 0; left: 0;" width="100%">
</div>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</div>
</nav>
<style>
text-align:justify;
</style>
</div>
</div>
<div class="col-sm-4" style="position: absolute;bottom: 0px; left: 0px;">
<div class="synopsis">
<h3>Barrett's Privateers</h3>
<h5>We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
</div
</div>
</div>
<div class="sponsorfooter" style="position: absolute;bottom: 0px; left: 0px;">
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg/v1/fill/w_196,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_1eab1592deae4a06927c22dd9435c1d6.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_a874687813fefff04482e59d0a287e96.jpg/v1/fill/w_176,h_82,al_c,q_75,usm_0.50_1.20_0.00/83f988_a874687813fefff04482e59d0a287e96.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_e495c4e400db4cfca085bf8540069272.jpg/v1/fill/w_120,h_120,al_c,q_75,usm_0.50_1.20_0.00/83f988_e495c4e400db4cfca085bf8540069272.jpg></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg/v1/fill/w_178,h_90,al_c,q_75,usm_0.50_1.20_0.00/83f988_60ec121fab6a43ef81217b60b0c805f5.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_049efbb23a743e7cc054b9b4b298232b.png/v1/fill/w_160,h_176,al_c,usm_0.50_1.20_0.00/83f988_049efbb23a743e7cc054b9b4b298232b.png></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg/v1/fill/w_296,h_68,al_c,q_75,usm_0.50_1.20_0.00/83f988_f3ee99e41d67a3553c962074edb27d8c.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg/v1/fill/w_158,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_4803fc6cbb10000fe9ca77e29aa326cd.jpg></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg</div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg/v1/fill/w_168,h_78,al_c,q_75,usm_0.50_1.20_0.00/83f988_8ef8a89d17e4b23cf08a78fe76c12950.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_14c382ea18bfee9aace258f8442f6af1.png/v1/fill/w_256,h_120,al_c,usm_0.50_1.20_0.00/83f988_14c382ea18bfee9aace258f8442f6af1.png></div>
<div class="col-sm-1"><img src= https://static.wixstatic.com/media/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg/v1/fill/w_280,h_72,al_c,q_75,usm_0.50_1.20_0.00/83f988_ddf046663ed7bcd9a804c6baa00bde75.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_64852a4616aa432092e85b3cef276674.jpg/v1/fill/w_164,h_98,al_c,q_75,usm_0.50_1.20_0.00/83f988_64852a4616aa432092e85b3cef276674.jpg></div>
<div class="col-sm-1"><img src=https://static.wixstatic.com/media/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg/v1/fill/w_158,h_74,al_c,q_75,usm_0.50_1.20_0.00/83f988_19fb52bb10e03c36338f2c2f61f8092d.jpg></div>
</div>
</body>
</html>【问题讨论】：
-
首先，在“Expeditions” 之后的第一个列表中有一个不好的。此外，您希望它在背景下还是在背景上但在底部？
与背景分离，就像背景图片下方的页脚一样跨越整个宽度。
标签： html css twitter-bootstrap