引导元素下的文本

Question

我想将我的引导元素放置在另一个元素下：

这是我的 html 代码：

<!--Home-->
<section id="home" class="home">
    <div class="container">
            <h1 class="quote">Welcome.</h1>


    </div>
</section>

<!--Section 2 : OVer mij-->
<section id="about" class="about section-padding">
    <div class="container">
        <h1 class="home-heading">About</h1>
        <blockquote class="abouttext" class="">
            Welcome to our website. We are offering a custom website just for you!
            We can use bootstrap, HTML, css and javascript for your custom website.
            Just send your design and we will make the website just how you like it!
            Just tell us what you want, or give us a design. We'll make it just how you like.
        </blockquote>
    </div>
</section>
<!--Section 3: services-->
<section id="services" class="contact section-padding">
    <div class="container">
        <h1 class="home-heading">Our sevices</h1>

        <!--images gallery-->
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #1</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #3</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="#">
                        <img src="http://placehold.it/350x150">
                        <div class="caption">
                            <p>Website #3</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

    </div>

此代码必须在上图下方：

    <div class="container servicetext">
    <h1>We offer a selected amount of pre-made templates, but we can also make your own personal website.
        We can also upload your site to your webserver if you prefer that.It's all up to you.
    </h1>
    </div>
</section>

这是我的 CSS：

/*Main*/
.section-padding{
    padding-top:100px;
    padding-bottom: 100px;
}
/*home*/
.home {
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#0f1b07 ;
    text-align:center;
    color:white;
}

.home-heading {
    font-size:52px;
}
/*home quote*/
.quote {

    font-size: 50px;
}
/*about*/
.about {

    height:70vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    text-align:center;
    color:#0f1b07;
}
/*abouttext*/
.abouttext {

}
/*contact*/
.contact {

    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #5c821a;
    text-align:center;
    color:white;

}

我正在使用引导程序 3.3.7。 提前谢谢，希望我的问题很清楚。

Answer 1

每当您想在引导程序中堆叠时，您都必须创建另一行：

<div class="row">
    <div class="col-md-4">
        <div class="thumbnail">
            <a href="#">
                <img src="http://placehold.it/350x150">
                <div class="caption">
                    <p>Website #1</p>
                </div>
            </a>
        </div>
    </div>
    <!-- more of that -->
</div>
<!-- something else -->
<div class="row">
    <div class="col-md-12">
        <div class="container servicetext">
            <h1>We offer a selected amount of pre-made templates, but we can also make your own personal website.
        We can also upload your site to your webserver if you prefer that.It's all up to you.
            </h1>
        </div>
    </div>
</div>