Вставка баннера в блоки на bootstrap

aim777

Здравствуйте, уважаемые коллеги! Очень нужна ваша помощь, не первый день ломаю голову над задачей, которая казалось бы простая.Используя бутстрэп, делаю поток блоков. Блоки разной высоты, в одной строке 3 блока. Общее число блоков какое угодно. Тут все очень просто:
<div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="item">
                    ...
                </div>
            </div>
 
            <div class="col-md-4">
                <div class="item">
                    ...
                </div>
            </div>
 
            <div class="col-md-4">
                <div class="item">
                    ...
                </div>
            </div>
        </div>
 
        <div class="row">
            <div class="col-md-4">
                <div class="item">
                    ...
                </div>
            </div>
 
            <div class="col-md-4">
                <div class="item">
                    ...
                </div>
            </div>
 
            <div class="col-md-4">
                <div class="item">
                    ...
                </div>
            </div>
        </div>
    </div>
Но проблема появляется, когда в этот поток блоков нужно вставить нестандартный элемент - баннер. Его ширина такая же, как у всех блоков, но высота может быть произвольной. Подскажите - как это сверстать??? Наверняка есть какое-то простое решение. Всю голову сломал. Очень прошу помочь.
4 ответа

aim777

Коллеги, неужели никто не знает, как это сделать?


aim777

если правильно Вас понял, то Вам необходимо задать col-md-# вертикально, а не горизонтально. т.е. к примеру у Вас задача сделать три столбца, а значит:
<div class="row col-md-4>тут содержимое первого</div> - //это первый столбец
<div class="row col-md-4>тут содержимое второго</div> - //это второй столбец
<div class="row col-md-4>тут содержимое третьего с вашим баннером</div> - //это третий столбец
т.е. принцип, повторюсь, в том, чтобы поставить блоки в вертикальное положение. и рассмотрев на примере блок с баннером.
<div class="row col-md-4>
    <div class="col-12"></div>
    <div class="col-12"></div>
    <div class="col-12 red_banner"></div>
</div>
где red_banner - ваш баннер с содержимым и т.п. Но, ВАЖНО!!! в случае если структура пойдет не так, как ожидалось, задайте родителям, а т.е. вот этим, каждым дивам
<div class="row col-md-4>тут содержимое первого</div> - //это первый столбец
<div class="row col-md-4>тут содержимое второго</div> - //это второй столбец
<div class="row col-md-4>тут содержимое третьего с вашим баннером</div> - //это третий столбец
display:block;


aim777

GrizZLY(=, большое спасибо за такой развернутый ответ, но у меня это не сработало. Кроме того, не очень понимаю логику такой разметки. Мы делаем одни и те же блоки и строками и столбцами одновременно?


aim777

Боже, как же я тупонул))) не нужно давать row аж 3 раза.. достаточно один row. и короче говоря.
<div class="row>
<col class="col-md-4">
<div class="wrap"></div>
</div>
<col class="col-md-4">
<div class="wrap"></div>
</div>
<col class="col-md-4">
<div class="wrap">
<div class="red_banner"></div>
</div>
</div>
</div>
.wrap{
display:block;
}
P.S. Прошу прощение за ввод в заблуждения...)где в каждый col-md-4 вписываете нужное Вам количество потомков (div'ов). а .wrap может и не нужен, но он всех потомков будет чётко позиционировать. и задаете им нужную высоту по макету. надеюсь, что теперь вопросов у Вас станет меньше)