html - 使用 BootStrap 为 Header 添加边框

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

如果您的要求不满足，您可以发送您需要的图片吗