html - 在 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>

这会显示默认的 Bootstrap 面板，如下所示:

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

Tl;博士为了清楚起见，请忽略我可以管理的不同样式，它们只是帮助我了解如何将下划线添加到面板标题。

编辑

非常感谢你们，这对我来说意味着世界。有用!见下文:

Answer 1

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

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

这是一个工作代码笔供您查看。 http://codepen.io/yongchuc/pen/KgOGvq