在我的页脚中我有段落,我想更改她的div标签的背景,但我不能。
我想更改div" bgdf"的背景,我尝试使用background-color: yellow;
HTML
<div class="container-fluid footer">
<div class="row">
<div class="col-xs-12">
<img src="img/Gallery/fb.png" alt="">  
<img src="img/Gallery/twitter.png" alt="">  
<img src="img/Gallery/youtube.png" alt="">  
<img src="img/Gallery/myspace.png" alt="">
<ol class="breadcrumb">
<li><a class="active">Home</a></li>  
<li><a href="#">Gallery</a></li>  
<li> <a href="#">FAQ</a></li>  
<li> <a href="#">Contact</a></li>
<li> <a href="#">Blog</a></li>
</br>
<li><a class="active">Service</a></li>  
<li><a href="#">Forum</a></li>  
<li> <a href="#">Portfolio</a></li>  
<li> <a href="#">About</a></li>
</ol>
<div class="bgdf">
<p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span> All Right Reserved | Testing Website </small></p>
</div>
</div>
</div>
</div>
CSS
.col-xs-12 .breadcrumb{
background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
content: none;
}
.breadcrumb li a {
color: white;
font-family: TW Cen MT;
font-size:17px;
}
.container-fluid p{
bottom: 0;
position: absolute;
margin-left: 34em;
}
.breadcrumb {
margin-bottom: 50px;
}
.bgdf{
background-color: yellow;
}
答案 0 :(得分:2)
尝试删除position: absolute;
并观察会发生什么。 p
内的.container-fluid
绝对是对着底部0定位的,所以现在没有任何内容可以显示。至少当我尝试时。
不是设置p
绝对值,而是将.bgdf
绝对值设置为底部,它似乎工作正常。
请参阅此http://jsfiddle.net/y8pf36bs/
希望这是你要求的。
以下是最后一个小提琴的最终代码:
.col-xs-12 .breadcrumb{
background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
content: none;
}
.breadcrumb li a {
color: white;
font-family: TW Cen MT;
font-size:17px;
}
.breadcrumb {
margin-bottom: 50px;
}
.bgdf{
background-color: yellow;
bottom: 0;
position: absolute;
width: 100%;
}