具有自定义颜色的引导面板角答案

【问题标题】：Bootstrap panel corners with custom color具有自定义颜色的引导面板角
【发布时间】：2018-07-23 12:25:31
【问题描述】：

我正在尝试制作具有自定义颜色的面板。此表壳颜色为橙色。从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;
 }

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

提前感谢您！

【问题讨论】：

标签： twitter-bootstrap colors panel background-color

【解决方案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;
}

【讨论】：

感谢您的快速回复！