Bootstrap 个具有自定义颜色的面板角

Question

我正在尝试制作一个具有自定义颜色的面板。这种情况下颜色为橙色。从 this 示例中可以看出，底角没有着色。

HTML

<div class="col-md-6">
<div class="panel color-orange">
<div class="panel-heading text-white text-center">
  text
</div>
<div class="panel-body color-white">
<div class="col-md-8" style="height:200px">
    SignUp to the system
 </div>
 <div class="col-md-4" style="height:100px">
      SignUp to the system
 </div>
 <div class="col-md-4" style="height:100px">
      SignUp to the system
 </div>
 </div>
 </div>
 </div>


CSS

.color-orange {
 background: #fa7921;
 }

.color-white {
 background: white;
 }

有谁知道我该如何解决这个问题？

提前致谢！

Answer 1

为整个面板添加边框。

<div class="col-md-6">
  <div class="panel color-orange">
    <div class="panel-heading text-white text-center">
      text
    </div>
    <div class="panel-body color-white border-orange">
      <div class="col-md-8" style="height:200px">
        SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
    </div>
  </div>
</div>

并在 css

.color-orange {
  background: #fa7921;
  // new border style
  border: solid 1px #fa7921;
}

.color-white {
  background: white;
}

Bootstrap 个具有自定义颜色的面板角

Bootstrap panel corners with custom color

colors

panel

background-color

twitter-bootstrap