引导板标题和正文之间令人讨厌的白线

Question

使用bootstrap 3和可折叠面板。如何在显示正文时删除标题和正文之间的白线。

HTML

<div class="panel-group">
<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapseTools" >Tools</a>                                    
        </h4>
    </div>
    <div id="collapseTools" class="panel-collapse collapse in">
      <div class="panel-body">
        hello
      </div>
    </div>
  </div>
</div>

CSS

.panel {
  background: #222222;
  border: 0;
}

.panel-default >.panel-heading {
  background: #222222;
  color: #eeeeee;
}

.panel-default >.panel-collapse {
  background: rgb(0, 145, 210);
  color: #ffffff;
  border-radius: 12px;
}

jsfiddle

Answer 1

您的panel-body班级设置了border-top: 1px #ddd。

如果你仍然想要1px的空间

，你可以将颜色设置为transparent

或者你可以设置border: 0来摆脱它。