Как на bootstrap 4 собрать такую сетку?

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
367
Реакции
201
IuI5iCaTSOy1Xp-nQBf61g.png

Это вообще возможно?
Мои попытки родили такую конструкцию, но она не работает, как и ожидалось:
HTML:
<div class="row">
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-3"></div> <!--тут уже не выходит ровная сетка - размеры считаются по родителю-->
                    <div class="col-md-9"></div>
                </div>
                <div class="row">
                    <div class="col-md-9"></div>
                    <div class="col-md-3"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row"></div> <!--Вот это должно быть половину высоты-->
                <div class="row"></div>
            </div>
        </div>
 
А что не правильно в твоей версии?

Скрытое содержимое для пользователя(ей): d0ublezer0
 
Последнее редактирование:
Что не работает? Вот Ваш код Для просмотра ссылки Войди или Зарегистрируйся Что в нем не так? Что не работает? Все выглядит как и ожидалось
 
в моей версии неправильно то, что колонки внутри col-md-9 не соответствуют ширине последней колонки
 
Может Вы не совсем правильно понимаете смысл сетки bootstrap? Что Вы подразумеваете под шириной последней колонки?
Код:
<div class="row">
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-3">Один</div>
                    <div class="col-md-9">Два</div>
                </div>
                <div class="row">
                    <div class="col-md-9">Три</div>
                    <div class="col-md-3">Четыре</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row">Пять</div>
                <div class="row"></div>
            </div>
        </div>
Для простоты понимания написал цифры в колонках. Вы хотите что бы ширина колонки с цифрой "Один" соответствовала ширине Колонки с цифрой "пять"? Если так, то они не будут равны, размеры рассчитываются в процентах от ширины родителя. Родитель "Единицы" уже родителя "Пятерки".
Не думаю что без хаков можно исправить ситуацию, в этом плане что 4-й что 3-й бутстрап одинаковы. Я бы копал в сторону Для просмотра ссылки Войди или Зарегистрируйся
 
IuI5iCaTSOy1Xp-nQBf61g.png

Это вообще возможно?
Мои попытки родили такую конструкцию, но она не работает, как и ожидалось:
HTML:
<div class="row">
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-3"></div> <!--тут уже не выходит ровная сетка - размеры считаются по родителю-->
                    <div class="col-md-9"></div>
                </div>
                <div class="row">
                    <div class="col-md-9"></div>
                    <div class="col-md-3"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row"></div> <!--Вот это должно быть половину высоты-->
                <div class="row"></div>
            </div>
        </div>
мне в свое время говорили, вот тебе друг удочка лови рубку -->Для просмотра ссылки Войди или Зарегистрируйся
 
А почему бы не разбить изображение сначала вот на 2 таких блока, а внути уже размещать другие блоки.
upload_2018-8-19_20-41-48.png
 
А почему бы не разбить изображение сначала вот на 2 таких блока, а внути уже размещать другие блоки.
Судя по его коду, он так и сделал.

Не очень знаком с bootstrap, но можно сделать приблизительно так:

Если у вас сетка на flex-box, то ваш col-md-3 имеет такую же высоту, как и col-md-9 при стандартном значении align-items: stretch;
В таком случае, вы можете сделать col-md-3 флекс контейнером со значением flex-direction: column; тогда ваши блоки будут строиться по вертикали. Первому блоку (в вашем случае это
row, лучше его заменить на кастомный и уже внутрь него ставить row
) необходимо поставить значение flex-basis: 25%; второму flex-basis: 75%; Таким образом они поделят col-md-3 на 4 равные части при этом первый блок будет в половину своей возможной высоты, то есть 1/4 всего своего родителя.
 
Мне кажется что такое на бутсрапе невозможно сделать попробуй грид использовать. Там вообще все что хочешь можно.
 
Назад
Сверху