从Bootstrap面板中删除CSS边框

Question

我有一个我在BS 2.3中使用的自举面板.

当一个面板包含内容时,我想显示正常面板及其边框等.但是,当正文中没有内容时,我想要一个类来删除面板主体周围的边框,这样你就是留在标题中的灰色条.

这是我想要做的事情的小提琴:http://jsfiddle.net/xwh0ca7c/

<div class="panel">
  <div class="panel-heading"> <span class="panel-title"><i class="icon-list-alt"></i>&nbsp;&nbsp;My Training Projects</span></div>
  <div class="panel-body">
      I do not want this border around the "Body" of this panel, just the heading. Really, when I remove the body div, I dont understand why the border is still there to begin with. I need a custom class that will allow me to not show the border / around the panel body
  </div>

CSS:

.panel {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
  padding: 10px 15px;
  margin: -15px -15px 15px;
  font-size: 17.5px;
  font-weight: 500;      
  background-color: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-footer {
  padding: 10px 15px;
  margin: 15px -15px -15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
} 

.panel-primary {
  border-color: #428bca;
}

.panel-primary .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}
/* This kinda of works but I only want to apply it to specific panels, not all
.panel, .panel-group .panel-heading+.panel-collapse>.panel-body{
    border: none;
}
*/

这是我想要在我选择的面板上获得最终结果的屏幕截图; 不是所有的人:

Answer 1

删除边框(和箱阴影)的.panel和改变的下边框.panel-heading边境

http://jsfiddle.net/xwh0ca7c/1/

第二个解决方案:现在添加noborder到panel

.panel.noborder {
    border: none;
    box-shadow: none;
}
.panel.noborder > .panel-heading {
    border: 1px solid #dddddd;
    border-radius: 0;
}

http://jsfiddle.net/xwh0ca7c/2/