Question

我试图在流体容器内创建2行。

第一行是所有设备的12列，而第二行是分为4,4,4

目前第二行位于容器下方，我无法确定导致问题的位置。

任何帮助都会受到赞赏（我对HTML很新）

谢谢

**<!-- Mid text (First row heading text)-->**

            <div class="container-fluid" style="padding: 0px !important">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="mid-text">
                            <div class="mid-text-heading"> Placeholder Text </div>
                                <div class="mid-text-heading2"> 
                                    <p>Placeholder Text</p></div>
                </div>
            </div>
        </div>



            **<!-- Mid image 1 'Responsive (2nd row starts here) -->**


                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                       <div class="mid-image1">
                            <img class="img-responsive center-block" src="responsive-image-1.png" alt="image1">
                            <div class="mid-image1-text"> Responsive Website </div>
                            <p>Placeholder Text</p>

                        </div>
                    </div>




             **<!-- Mid image 2 'Responsive' -->**



                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="mid-image2">
                            <img class="img-responsive center-block" src="placeholder-image.png" alt="image2">
                                <div class="mid-container2.png"> Placeholder Text </div>
                                    <p>Placeholder Text</p>

                        </div>
                    </div>



             **<!-- Mid image 3 'Responsive' -->**



                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <div class="mid-image3">

                            <img class="img-responsive center-block" src="mid-container3.png" alt="image3">
                            <div class="mid-image3-text"> Placeholder text </div>
                            <p>Placeholder Text</p>

                        </div>
                    </div>
                </div>
            </div>

/ *中间文字* /

.mid-text {

width: 100%;
height: 500px;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 40px;
background-color: #ffd33d;

}

.mid-text .mid-text-heading {

margin-top: 0px;
padding-top: 30px;
text-align: center;
color: black;
font-family: 'Lato', sans-serif;
font-weight: 300;

}

.mid-text .mid-text-heading .mid-text-heading2 {

margin-top: 0px;
padding-top: 30px;
text-align: center;
color: red;
font-family: 'Lato', sans-serif;
font-weight: 100;

}

.mid-image1 {

width: 100%;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-align: center;

}

.mid-image1 .mid-image1-text {

}

.mid-image2 {

width: 100%;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-align: center;

}

.mid-image2 .mid-image2-text {

}

.mid-image3 {

width: 100%;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;

}

.mid-image3 .mid-image3-text {

}

流体容器2排

0 个答案: