Bootstrap面板不能用于某些颜色

Question

我正在使用Bootstrap面板。这里是我的CSS：

.panel-green { 
    border-color: #649f2b; 
} 
.panel-green > .panel-heading { 
    background-color: #4b7720; 
    border-color: #7dc736; 
    color: #FFFFFF; 
} 
.panel-green .panel-footer { 
    background: #649f2b; 
    border-color: #7dc736; 
    color: #FFFFFF; 
} 
.panel-green [class^="fa-"]:before, 
.panel-green [class*=" fa-"]:before { 
    color: rgba(255, 255, 255, 0.8); 
    margin-right: 5px; 
} 
.panel-yellow { 
    border-color: #d0b426; 
} 
.panel-yellow > .panel-heading { 
    background-color: #a58f1e; 
    border-color: #dec64b; 
    color: #FFFFFF; 
} 
.panel-yellow .panel-footer { 
    background: #d0b426; 
    border-color: #dec64b; 
    color: #FFFFFF; 
} 
.panel-yellow [class^="fa-"]:before, 
.panel-yellow [class*=" fa-"]:before { 
    color: rgba(255, 255, 255, 0.8); 
    margin-right: 5px; 
} 

这里是HTML代码：

<div class="panel panel-green"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">A Heading</h3> 
    </div> 
    <div class="panel-body"> 
     <p>some content </p> 
    </div> 
</div> 

它工作正常的面板绿色，但是当我把面板黄色的HTML而不是面板，绿色，它不再工作。它只显示没有任何颜色的盒子，没有标题或主体分隔符。问题是什么？我错过了什么？

Answer 1

选中此项，您必须在html中更改“panel-yellow”类。

.panel-green { 
 
    border-color: #649f2b; 
 
} 
 
.panel-green > .panel-heading { 
 
background-color: #4b7720; 
 
border-color: #7dc736; 
 
color: #FFFFFF; 
 
} 
 
.panel-green .panel-footer { 
 
background: #649f2b; 
 
border-color: #7dc736; 
 
color: #FFFFFF; 
 
} 
 
.panel-green [class^="fa-"]:before, 
 
.panel-green [class*=" fa-"]:before { 
 
color: rgba(255, 255, 255, 0.8); 
 
margin-right: 5px; 
 
} 
 
.panel-yellow { 
 
border-color: #d0b426; 
 
} 
 
.panel-yellow > .panel-heading { 
 
background-color: #a58f1e; 
 
border-color: #dec64b; 
 
color: #FFFFFF; 
 
} 
 
.panel-yellow .panel-footer { 
 
background: #d0b426; 
 
border-color: #dec64b; 
 
color: #FFFFFF; 
 
} 
 
.panel-yellow [class^="fa-"]:before, 
 
.panel-yellow [class*=" fa-"]:before { 
 
color: rgba(255, 255, 255, 0.8); 
 
margin-right: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-yellow"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">A Heading</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <p>some content </p> 
 
    </div> 
 
</div>