为什么我无法在另一个div中更改div的背景颜色

时间:2015-03-10 21:02:38

标签: html css twitter-bootstrap

在我的页脚中我有段落,我想更改她的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=""> &nbsp
            <img src="img/Gallery/twitter.png" alt=""> &nbsp
            <img src="img/Gallery/youtube.png" alt=""> &nbsp
            <img src="img/Gallery/myspace.png" alt="">


                <ol class="breadcrumb">
                    <li><a class="active">Home</a></li>  &nbsp
                    <li><a href="#">Gallery</a></li>  &nbsp
                    <li> <a href="#">FAQ</a></li>   &nbsp
                    <li> <a href="#">Contact</a></li>
                    <li> <a href="#">Blog</a></li>
                    </br>
                    <li><a class="active">Service</a></li>  &nbsp
                    <li><a href="#">Forum</a></li>  &nbsp
                    <li> <a href="#">Portfolio</a></li>   &nbsp
                    <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;
}

1 个答案:

答案 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%;
}