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

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

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

bootstrap元素下的文本

1 个答案: