Контейнер для жидкости 2 ряда - PullRequest
Новая
       10

Контейнер для жидкости 2 ряда

0 голосов
/ 24 мая 2018

Я пытаюсь создать 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 {

}

...