如何摆脱Bootstrap面板标题底部的灰线？

Question

问题

我有这些面板，我已经成功地改变了颜色：

但是当我展开面板时，每个面板标题的底部都有一个薄灰色边框：

我怎样才能摆脱那条灰色？

我的代码

CSS

.panel-wrong{
    border-color: #FED0D3;
}
.panel-wrong > .panel-heading{
    background: #FED0D3;
    color: #F53240;
    border-color: #FED0D3;
}

.panel-right{
    border-color: #E5FFFB;
}

.panel-right > .panel-heading{
    background: #E5FFFB;
    color: #02C8A7;
    border-color: #E5FFFB;
}

HTML 的

<div class="panel-group" id="accordion">
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                            </h4> </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4> </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">panel body 2</div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-right">
                        <div class="panel-heading">
                            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4> </div>
                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">panel body 3</div>
                        </div>
                    </div>
                </div>

JSFiddle

Answer 1

.panel-group .panel-heading + .panel-collapse > .panel-body {
  border: none;
}

JSFIDDLE

Answer 2

.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
border-top: medium none;
}

Answer 3

您正在寻找的特定属性是border-top-color选择器的.panel-body属性。通过将其值更改为transparent，您应该删除它，因此：

.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}