使用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; 
} 

如果你的要求不符合，你可以發送你需要的圖像