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>