html - Bootstrap 元素下的文本

Question

我想将我的 bootstrap 元素放在另一个元素下:

这是我的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;

}

我正在使用 Bootstrap 3.3.7。 提前致谢，希望我的问题很清楚。

Answer 1

每当你想在 bootstrap 中堆叠时，你必须创建另一行:

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