Question

我的笔：http://codepen.io/helloworld/pen/PwKzMJ

我使用panel-primary但背景不是蓝色而是边框变蓝......

为什么会这样？

<div id="main-container" class="container-fluid">
  <div class="row">
    <div>
     <div class="panel panel-primary">
      <div class="panel-body">
        Customer
      </div>
      <div class="panel-footer">
        <div class="row">
          <div class="col-xs-6">
            <img class="img-responsive col-xs-12" src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
          </div>
          <div class="col-xs-6 col-bottom">

               <ul class="list-group">
                 <li class="list-group-item ">Intel</li>
                 <li class="list-group-item ">Micron</li>
                 <li class="list-group-item ">Infineon</li>   
                 <li class="list-group-item ">First Solar</li> 
              </ul>

        </div>
        </div>
      </div>
     </div>
    </div>
  </div>
</div>

#main-container
{
  margin:10px;
}

Answer 1

Elisa的

您添加的codepen链接有两个类

.panel-primary {
  background-color: #006AB3 !important;
}

并且

.panel .panel-footer{
  background:white;
}

由于面板页脚的特异性更多，因此它已应用于页脚。尝试删除.panel-footer类。

Answer 2

试试这个

.panel-primary {
background-color: #337ab7;
}

Answer 3

你需要

.panel .panel-footer{
  background: #006AB3;
}

因为您的页脚完全覆盖了您的面板： - ）

已编辑的CodePen： - http://codepen.io/anon/pen/OPjRMQ

bootstrap 3不会将panel-primary应用为蓝色背景颜色

3 个答案: