使用BootStrap将边框添加到标题

Question

我正在使用试图使用Bootstrap添加黑色边框。我的标题分为三个部分。

• 第一部分有4行。
• 中间部分在中央有一排。
• 第三部分分为两部分。

另外，你可以告诉我一个蓝色填充行的例子在第一节（使背景蓝色的任何第一节行都很好）。

我想有边界的部分之一，二，三（各地，在字里行间。

下面是我的代码请帮助，这将是巨大的，如果你能告诉我有关的jsfiddle一个例子。

<style> 
    .container { 
     margin-top: 10px; 
    } 

    .PI1{ 
     -moz-box-shadow: 0 0 2px black; 
     -webkit-box-shadow: 0 0 2px black; 
     box-shadow: 0 0 2px black; 
    } 
</style> 

<!-- Border Outline --> 

<header> 
    <div class="Header" id="Header Information"> 
     <div class="content container"> 
      <div class="row"> 
       <article class="service col-md-4"> 
        <div class="PersonalInformation"> 
         <div class="PI1"><p> Sponsers:</p></div> 
         <div class="PI1"><p> Dept. and Resp:</p></div> 
         <div class="PI1"><p> Date:</p></div> 
         <div class="PI1"><p> Updated:</p></div> 
        </div> 
       </article> 
       <article class="service col-md-4"> 
        <br> 
        <H2> Title:</H2> 
        <br> 
       </article> 
       <article class="service col-md-2"> 
        <p> Manager:</p> 
        <p> TM:</p> 
        <p> TM:</p> 
        <p> TM:</p> 
       </article> 
       <article class="service col-md-2"> 
        <p> TL:</p> 
        <p> TM:</p> 
        <p> TM:</p> 
        <p> Coach:</p> 
       </article> 
      </div><!-- row --> 
     </div><!-- content container --> 
    </div><!-- Personal Information Heading --> 
</header> 

Answer 1

按照我的假设我已经找到了通过CSS的解决方案

CSS

.container { 
    margin-top: 10px; 
} 
.PersonalInformation div.PI1:first-child{ 
    background:blue 
} 

.PI1{ 
    -moz-box-shadow: 0 0 2px black; 
    -webkit-box-shadow: 0 0 2px black; 
    box-shadow: 0 0 2px black; 
} 
article:nth-child(2){ 
    border-left:1px solid #111; 
    border-right:1px solid #111; 
} 

如果你的要求不符合，你可以发送你需要的图像