Как в сетке Bootstrap 4 сделать у части фон до края окна только с одной стороны?

Question

[Никита Мелихов]

Есть макет:

Крайние вертикальные направляющие - ширина блока container.
Слева часть с зелёным фоном, но нужно окрасить не только саму колонку в контейнере, но и часть до края окна. Тут я и застрял :(

Когда нужен фон, окрашенный целиком - засовываю всё в container-fluid, которому и назначаю фон, тут просто.

Был макет, когда ровно половина должна быть закрашена - сделал широкую горизонтальную полоску высотой 1px, где одна половина окрашена в нужный цвет. Может, и костыль, но довольно безобидный :)

Тут же вообще идей нет, как такое сделать, чтобы не было диким и кривым костылём.

Comments

[snap44]

зеленый блок 3 колонки, товары 9
в зеленом еще один row и сколько-то там колонок с offset

[Никита Мелихов]

snap44, слева часть фона (за направляющей), которая выходит за контейнер и этот фон должен быть до границы окна. Вопрос именно в этом.
С самой сеткой вопросов нет.

[tema_sun]

Я бы рекомендовал перестать пытаться играть саксофоном на скрипке и взять смычок. В смысле, если инструмент(в этом случае бутстрап) стал не удобен, то смените инструмент.

[Никита Мелихов]

tema_sun, бутстрап удобен. Вопрос с фоном практически единственный, который возникает при работе с бутстрапом, смысла менять на что-то другое не вижу.

[Antony Bark]

тяжелее будет, когда например, у какого-то блока глубоко внутри страницы должны быть цветные уши во всю ширину окна браузера, а весь контент уже внутри .site-inner с фикс.макс. шириной, например 1033px ))

Answer 1

[hellcaster]

body {
 background-image: linear-gradient(to right, green 0%, green 50%, white 50%, white 100%);
} /*а дальше самим блокам задаем background*/

Comments

[hellcaster]

Или не body, а wrapper'у, который находится выше bootstrap container

[Никита Мелихов]

Гениально! Даже и не подумал про этот способ :)