html - 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>