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

[d0ublezer0]

Это вообще возможно?
Мои попытки родили такую конструкцию, но она не работает, как и ожидалось:

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

 

[D'Jack]

А что не правильно в твоей версии?

 

[zALEHANz]

Что не работает? Вот Ваш код Для просмотра ссылки Войди или Зарегистрируйся Что в нем не так? Что не работает? Все выглядит как и ожидалось

 

[d0ublezer0]

в моей версии неправильно то, что колонки внутри col-md-9 не соответствуют ширине последней колонки

 

[zALEHANz]

Может Вы не совсем правильно понимаете смысл сетки 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-й бутстрап одинаковы. Я бы копал в сторону Для просмотра ссылки Войди или Зарегистрируйся

 

[ponoroshca]

Это вообще возможно?
Мои попытки родили такую конструкцию, но она не работает, как и ожидалось:

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

мне в свое время говорили, вот тебе друг удочка лови рубку -->Для просмотра ссылки Войди или Зарегистрируйся

 

[dandandan]

А почему бы не разбить изображение сначала вот на 2 таких блока, а внути уже размещать другие блоки.

Спойлер: Картика

 

[Get-Web]

А почему бы не разбить изображение сначала вот на 2 таких блока, а внути уже размещать другие блоки.

Спойлер: Картика

Посмотреть вложение 97554

Судя по его коду, он так и сделал.

Не очень знаком с 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 всего своего родителя.

 

[arkanaman]

Мне кажется что такое на бутсрапе невозможно сделать попробуй грид использовать. Там вообще все что хочешь можно.