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

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

使用BootStrap向Header添加边框

1 个答案: