ブートストラップのパネルに下線を追加する

Question

私は今、ブートストラップフレームワークを使ってHTMLで構築を始めたいinkscapeでデザインを作成しました。

しかし、パネル見出しに下線を追加しようとすると、ちょっとイライラする/紛失しています。私

：

<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の、博士 ちょうど私はちょうど私がパネルの見出しに下線を追加する方法を理解するのに役立つことを管理できるさまざまなスタイリングを無視スーパー明確にすること。

EDIT

はそんなにみんなありがとうこれは私に世界を意味します。 それは動作します！以下を参照してください。これを実現するために

Answer 1

一つの方法は、上マージンと上部の境界線を持っている.panel-bodyのためのカスタムスタイルを追加しています。

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

ここでは、レビューするための作業コードがあります。 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; 
}