Здравствуйте. Спрашивал на SO, тщетно, никто не ответил.
Решил тут, может найдется кто-нибудь, кто совет дельный подскажет.
Верстаю на Boostrap 3
И сверстать надо вот такую штуку:
i.imgur.com/GmoXmEE.png
Как видно, синий фон должен выходить за пределы "container'a", чтобы всегда быть на 100% ширины колонны.
Изначально, не думал что возникнут проблемы. И я наверстал вот такой кодик:
www.bootply.com/QPggqP2Ox6
Как видно, есть 2 колонны, и бэграунд не обрамлен в ".container"
Всё работает хорошо, сворачивается после 992px и прочее.
Но потом мой тимлид сказал, что дизайн такой, что у контейнера должна быть max-width: 1200px и добавил мне такой код:
.container{
max-width: 1200px;
width: 100%;
padding-left: 50px;
padding-right: 50px;
}
После этого, когда, например, делаешь разрешение viewport'a 1500px, у бэграунда всё равно остаются фиксированные отступы слева и справа и получается, что
max-width от
container к ним не применяется. Потому что структура кода такая, что margin-left&right: auto не воздействуют на элементы бэграунда, потому что они не обрамлены в контейнер.
Я сказал ему, что не получится сделать так, как он хочет. На что он мне запушил вот такой код и сказал, мол, вот, сделал за тебя работу:
www.bootply.com/mAyVKhFvMV
И вправду, на разрешениях 992px+ всё ок, но у него в коде 4 колонны, и, когда делаешь меньше 992px разрешение, колонны стакаются так, что контент и заголовки не совпадают.
И вот сижу мучаюсь, как же решить эту проблемы. Пробовал добавлять push/pull, бесполезно.
В общем, просто в тупике. Подскажите, как совместить поведение этих двух вариантов, чтобы после 992px было всё ок и до 992px было тоже всё ок.
Средний
Простой