在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我很满意它，它只是为了我的生活我似乎无法弄清楚如何将下划线添加到默认的引导程序面板组件。）

铊;博士 只是要非常明确地忽略我可以管理的不同样式，这只是帮助我理解如何在面板标题中添加下划线。

修改

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

Answer 1

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

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

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

Answer 2

试试这个：

演示here

HTML：

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

CSS：

.panel { 
  max-width: 500px;
  margin: auto;
}
.custom-separator {
  height: 5px;
  background-color: #428BCA;
  margin: -12px -15px 10px;
}