Как сверстать несколько правых колонок bootstrap во всю оставшуюся ширину?

Question

[Максим Шадрин]

Всем привет.
Сверстал страницу на bootstap сетке. Это дизайн главной.
А вот как выглядит дизайн для других страниц

Правая часть блока, а точнее ее фон расширен на весь экран. Container для этих целей не подходит, так как он фиксированной ширины.
Если задать container-fluid, то левый блок (Меню) будет прыгать туда-сюда, тем более он должен быть с прозрачным фоном. Видимо нужен какой-то хитрый микс из container и container-fliud, но я уже всю голову сломал, как это сделать.
Подскажите пожалуйста.

Answer 1

[arsenty]

www.bootply.com/XYVEABrrDO

Comments

[Максим Шадрин]

Спасибо, ваше решение напомнило мне о :after, с его помощью и решил проблему!

Answer 2

[Павел]

а может просто тупо не использовать контейнер?

Comments

[Максим Шадрин]

да я уже и над таким вариантом думал, сделать простыми блоками, как в старые добрые, левому float: left и нужное количество пикселей в ширину, правом margin-left на эту ширину, НО тогда надо и шапку в таком стиле делать, ибо иначе, блок будет скакать туда сюда при изменении ширины, а шапка не будет, и совсем отказываться от бутстрапа, а я уже главную сверстал, неужели нет варианта, как это сделать, не ломая сделанную работу.

[Павел]

не совсем понял о чем вы. Если использовать row , а внутрь вместо контейнера задать свои стили блоку то выйдет то что вам нужно

[Максим Шадрин]

а как в таком случае блоки отпозиционировать ровно так-же как блоки в шапке, которые отталкиваются от сеточной разметки bootstrap? При изменении размера окна будет рассинхрон по выравниванию.

Answer 3

[Максим Шадрин]

Решил проблему с помощью псевдоэлементов :before, :after. Спозиционировал их левее правее моих блоков и задал им такой же фон.