将下划线添加到 Bootstrap 的面板

Question

我在inkscape中做了一个设计，我现在想开始使用bootstrap框架在HTML中构建。

但是，我发现尝试在面板标题中添加下划线有点令人沮丧/迷失。

bootstrap 中的代码是这个特殊的部分，只是为了显示我所指的面板组件：

<section class="panel panel-primary">
  <header class="panel-heading">
   <h5 class="panel-title">Panel title</h5>
  </header>
  <div class="panel-body">
   <p>Panel content</p>
  </div>
</section>

这将显示默认的引导程序面板，如下所示：

我想要实现的是以下内容：（请注意，我只是参考下图中的下划线来设置面板样式以匹配下面的样式我可以这样做不要担心完整的 CSS 我对它相当满意，这只是为了我的生活，我似乎无法弄清楚如何将下划线添加到默认的引导面板组件。）

Tl; Dr 只是为了超级清楚忽略我可以管理的不同样式，这只是帮助我了解如何将下划线添加到面板标题。

编辑

非常感谢你们，这对我来说意味着整个世界。有用！见下文：

Answer 1

实现此目的的一种方法是添加自定义样式以.panel-body使其具有顶部边距和顶部边框。

.panel-body {
  border-top: 2px solid #337ab7;
  margin-top: 3px;
}

这是一个可用的 codepen 供您查看。http://codepen.io/yongchuc/pen/KgOGvq